Learn SASS

Sass is a scripting language that allows you to write CSS in a more convinient and efficient way. There are two ways to write Sass, SASS syntax and SCSS syntax. At Progate, we use the SCSS syntax, which is the more common syntax. Note that the file extension is .scss rather than .css.

Merits of Sass:

Less writing than CSS
Allows you to re-use code

Nesting

First, let’s look at the nesting structure of HTML & CSS below.

1
2
3
4
5


<div class="header">
  <ul>
    ..
  </ul>
</div>

the CSS would be

1
2
3
4
5
6
7
8
9


.header {
  width: 100%;
}
.header ul {
  padding: 10px;
}
.header ul li {
  font-size: 15px;
}

look that you have to write .header three times.

In this way, Sass allows you to nest selectors in other selectors.

1
2
3
4
5
6
7
8
9


.header {
  width: 100%;
  ul {
    padding: 10px;
    li {
      font-size: 15px;
    }
  }
}

The larger a site becomes, the more useful nesting becomes. It’s especially useful when making changes to class names. If you wanted to change the class name of the header above, you would need to make changes in 3 places with normal CSS, but with Sass you only need to make one change.

References: