8 reasons to start using SCSS right now

Hello everyone! Today I am in a nutshell explain what is a SCSS and I’ll give you the 8 reasons why you should start to use it in your projects right now.

SCSS(Sassy CSS) is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and syntax. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scssextension.

Now when we made a quick review of SCSS, we can finally go to advantages:

1. Easy integration in the project. Actually web browsers don’t recognize .scss files, that’s why we need to transform it to .css. But luckily there a lot of ways to do it, with some tools like Grunt, Gulp or Webpack, or just using Node, in reason if you don’t want to install additional tools. See how to do it with React and Node in example below:

First, let’s install the command-line interface for Sass:

npm install --save-dev node-sass-chokidar npm-run-all

Then in package.json, add the following lines to scripts:

"scripts": {
    "build-css": "node-sass-chokidar src/assets -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/assets -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
    "test": "react-scripts test --env=jsdom",
}

Note: To use a different preprocessor, replace build-css and watch-css commands according to your preprocessor’s documentation.

2. Live reload. After adding in a "start" script watch-csscommand your application will automatically track any changes in the .scss files and rewrite them in main.css .

3. Nesting. I think most of you are tired of repeating class names when declaring styles for specific elements like:

landing-page h1 {};
landing-page div {}
landing-page div span .disabled {}
landing-page.new-landing {}

Copy-paste, copy-paste ahhhhhhhh!!!!!

SCSS will let you nest your CSS selectors in some hierarchy, which looks visually better and easier to understand, and of course much less code. Just look what the code above looks like in the .scss .

landing-page {
  h1 {};
  div{ 
    span{
      .disabled{}
    }
  }
}
landing-page {
   &.new-landing {}
}

Isn’t that pretty?

4. Variables. With variables you can store any CSS value like sizes, colors, fonts and reuse their where you want. This allows you to create theme files, and change application styling by changing values only in this theme file, instead changing in each files where the value was used. For using variables in SCSS just add the $ symbol to make some value as a variable.

// _variables.scss
$primary-size: 16px;
$primary-color: #ff0000;
$primary-font: Arial, Helvetica, sans-serif, Open Sans;
$primary-gradient: linear-gradient(100deg, #03D8C9 0%, #5753FE 97%);
p {
  font: $primary-font;
  color: $primary-color;
}
div {
  background-color: $primary-gradient;
}

5. Import. As was mentioned above, you may want to create a theme file and use it to different pages. "@import" function can help you in this. Imagine that you have a _landing.scss file and you want to use “light” theme on it, then the _landing.scss will have following type:

// _landing.scss
// _variables.scss
@import './path_to_your_theme_folder/light-themes.scss'
@import './path_to_your_variables_folder/variables.scss'
landing-wrapper {
  color: $primary-color;
}

Import all your .scss into one general main.scss for tracking all your changes from one place.

/ main.scss
@import './login-page.scss';
@import './signup-page.scss'
@import './landing.scss';
...

SCSS will take all your imported files and combine them with a file you’re importing into and your output will be a singlemain.cssfile.

// main.css
p {
  font: Arial, Helvetica, sans-serif, Open Sans;
  color: #ff0000;
}
div {
  background-color: linear-gradient(100deg, #03D8C9 0%, #5753FE 97%);
}
landing-wrapper {
  color: #ff0000;
}

6. Operators. Another powerfull option of SCSS is supporting of math operators like +, -, *, /, and %, which allows you make calculation in .scss files and make your styles more dynamically.

div {
  text-align: center;
  width: 20vw / 50vh * 100%;
}

7. Mixins. SCSS also allow you to group a couple of CSS declaration into one entity — mixins, and like a variables you can reuse their where you want, you can even pass in values, which makes mixins in some way similar to functions. For using type@include before the name of the mixins, and feel free to use all power of this option.

@mixin fill($color) {
  background-color: $color;
  border-color: $color;
  color: $color;
  outline: 4px solid $color;
}

div { @include fill(#00ff00); }

8. Partials. Sometimes you need to create a few style files responsible for a particular piece of page, and you don’t want to create a separate file for it, instead you want to use them as a part of other.scss files. Just name them _your_style_file.scss. The underscore would send the message to the preprocessor that you don’t want to create a separate file for this.

Well, and as you have probably already noticed partials are used with the "@import"command.

I hope you like the article, so please, press the Clap button and help others find this story.