What Is SASS(SCSS)? A Short Explanation of Its Benefits

What Is Sass?

Sass is a “metalanguage for CSS” designed by Hampton Catlin and developed by Natalie Weizenbaum.

A metalanguage is “a language used to explain another language,” and Sass can be described as “a language that extends CSS with additional features.” You can think of it as a way to write CSS more efficiently.

Sass stands for “Syntactically Awesome Style Sheets,” meaning “syntactically awesome style sheets.”

How Is It Different from CSS?

Because Sass is a CSS metalanguage, it is a language that extends CSS with additional features.

Usually, you can work without problems using CSS, but as the amount of CSS grows, the work gradually becomes harder. When there are changes, you also have to modify each place one by one, which takes effort.

When you use Sass, the amount you normally need to write is reduced, and even when changes are needed, the scope of modifications can be smaller than with CSS.

In this way, Sass supplements CSS’s weaknesses and adds richer features.

What Is the Difference Between SASS and SCSS?

Sass actually has two syntaxes: the “SASS syntax” and the “SCSS syntax.”

At first, only the SASS syntax was used. It greatly simplified the usual way of writing CSS, but because it differed from normal CSS writing style and was hard to understand, it did not spread widely.

Later, the SCSS syntax, which is similar to CSS writing style, was created. It spread widely and continues to be used today. Therefore, even though it is called Sass, the file extension is usually .scss.

Disadvantages of Introducing Sass

Introducing Sass is not all upside. There are some disadvantages.

Environment Setup Can Be Troublesome

To use Sass, you need to set up an environment. Many people hesitate to introduce Sass because of this.

However, these days you can use Sass easily with Visual Studio Code extensions such as Easy Sass and Live Sass Compiler, so the setup effort can be reduced.

Learning Cost

You need to learn new Sass techniques, so there is a learning cost.

However, if learning Sass now can improve your coding efficiency later, it is worth learning even with that cost.

There is environment setup and learning cost, but Sass has benefits that outweigh them, so it is worth considering instead of giving up at this point.

Benefits of Introducing Sass

Here are two major benefits of introducing Sass.

Higher Work Efficiency

The first benefit you feel after introducing Sass is improved work efficiency. Compared with CSS, the amount of code you need to write becomes much smaller, so coding becomes much easier.

Also, even complex code can be organized once and reused later with a simple call. Once you start using Sass, you may not want to go back to writing plain CSS.

Better Maintainability

In Sass, you can define frequently used values such as a site’s main color, sub color, and container width as variables.

For example, if you later want to change the main color from red to orange, you can modify all related CSS by changing only one variable.

With CSS, you would have to modify every related location, but Sass makes later changes easier and improves maintainability.

Main Features of Sass

Sass has many features, but here are four representative features that are especially convenient.

Simplifying Nested Structures

Sass can write selectors with parent-child relationships in a nested structure.

In CSS, you must repeatedly write all selectors from the parent element to the target element, so the amount of code inevitably increases as shown below.

style.css

section {
  margin-bottom: 100px;
}
section h1 {
  font-size: 24px;
}
section p {
  margin-bottom: 20px;
}
section a {
  color: red;
}
section a:hover {
  opacity: 0.4;
}

In Sass, nesting lets you write related styles together, reducing the amount of code and making parent-child relationships easier to understand.

style.scss

section {
  margin-bottom: 100px;
  h1 {
    font-size: 24px;
  }
  p {
    margin-bottom: 20px;
  }
  a {
    color: red;
    &:hover {
      opacity: 0.4;
    }
  }
}

If you want to change section to .test, you only need to modify the first line from section to .test, which greatly reduces the work.

Variables

Sass can use variables.

By defining frequently used values such as a site’s main color, sub color, and container width as variables, you can reuse them wherever they are repeatedly written.

style.scss

// Color settings
$main-color: blue;
$sub-color: gray;
$link-color: red;

// Usage example
section {
  background-color: $main-color; // Main color
  margin-bottom: 100px;
  h1 {
    font-size: 24px;
    background-color: $sub-color; // Sub color
  }
  p {
    margin-bottom: 20px;
  }
  a {
    color: $link-color; // Link color
    &:hover {
      opacity: 0.4;
    }
  }
}

When compiled to CSS, it becomes the following, and you can see that each color is reflected as specified.

style.css

section {
  background-color: blue; 
  margin-bottom: 100px;
}
section h1 {
  font-size: 24px;
  background-color: gray;
}
section p {
  margin-bottom: 20px;
}
section a {
  color: red;
}
section a:hover {
  opacity: 0.4;
}

When changes are needed, using variables lets you finish the work with the minimum amount of modification, so values with a wide impact are best defined as variables.

Using Mixins

Sass can use mixins.

A mixin is a feature that lets you define CSS styles, such as button designs used on a site, and reuse them elsewhere.

For example, suppose you want to use a button style from the site on another page but change only the color. Even though only the color is different, you still need to write the layout-related styles for the button itself, increasing the amount of code.

style.css

.button01 {
  background-color: blue;
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}

.button02 {
  background-color: gray;
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}

With a mixin, define the shared styles in the mixin and call it, then write only the new color style.

style.scss

// Button style settings
@mixin button {
  display: inline-block;
  width: 300px;
  max-width: 100%;
  padding: 20px 10px;
  border: 2px solid transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.16);
  color: #fff;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}

.button01 {
  background-color: $main-color;
  @include button; // Loads the button style with @include.
}

.button01 {
  background-color: $sub-color;
  @include button; // Loads the button style with @include.
}

This is very useful when you use the same style in multiple places.

Splitting Files for Easier Management

Sass lets you split files and manage them more easily.

For example, files can be divided as follows.

• _header.scss
• _body.scss
• _footer.scss
• _sidebar.scss

Then, if you need to edit the header, you only modify _header.scss, making the relevant part easier to find and manage.

The files themselves are split, but ultimately they can be bundled into a single stylesheet.

This example splits files as shown above for clarity, but in practice you often divide them by feature, layout, color files, and so on.