SCSS VS CSS: an opinionated introduction

The SCSS extension is better known as the SASS language, which stands for Syntactically Awesome Style Sheet.

The SASS language is a superset of the CSS language, meaning that once you’ve written your SCSS files, you compile them into CSS so that browsers can understand them.

Why is SCSS popular among web developers?

SCSS is popular because it provides advanced features that can help in writing and maintaining your CSS files.

One of the great features of SCSS is the introduction of variables.

In CSS, you used to write the style rules for your HTML elements as follows:

body {
  background-color: #5ab472;
  color: #fff;
  font-size: 16px;
}

With SCSS, you can use variables when writing your styles as shown below:

$bgColor: #5ab472;
$white: #fff;
$fontMd: 16px;

body {
  background-color: $bgColor;
  color: $white;
  font-size: $fontMd;
}

Notice the use of variables that starts with a $ sign in the code above. The value of the properties applied to the body tag above will be the same as the value of the variables.

With the introduction of variables, you can inspect your CSS rules and put any duplicate values as variables.

By using variables, maintaining the consistency of your CSS style rules will be easier as your application grows.

SCSS nesting feature

Variables are only one of the advanced features introduced in SCSS. Another feature that’s very useful is the power to nest style rules.

For example, in CSS you may write styles for nav class as follows:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Notice how the style for ul, li, and a tags above are all written on the same levels.

By using SCSS, you can nest the declaration of the rules above as follows:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

What do you think? By nesting the style declarations, you have a clear visual hierarchy between the styled elements.

SCSS has lots of advanced features, but you can get a gist of it on its introduction page.

Compiling SCSS into CSS

Compiling SCSS into CSS is also very easy. You just need to install the command line program for SASS by using npm, Chocolatey (For Windows), or Homebrew (For Mac OS and Linux).

If you’re already working with JavaScript and Node.js, I’d suggest you install the SASS library using npm:

npm install -g sass

Once installed, you can compile your SCSS file into CSS by using the following command:

sass input.scss output.css

The command above will take the file input.scss and process it into output.css file.

If you don’t specify the output file, then the result will be printed on the command line.

Should you use SCSS?

Using SCSS for your web application project is purely a preferential decision. If you ask me, I’d say that using SCSS will definitely help you to write more maintainable CSS.

It doesn’t take a lot of time to learn SCSS syntax, and the benefit of using SCSS is that you get to use variables, nesting, and other great features to speed up your web development project.

But you need to try SCSS for yourself to know the answer. For more information, check out the SASS documentation page.