jugal13

Adding SASS to your Webpages

This article focuses on the features of nesting and variables in SASS

Jugal Wadhwa's photo
Jugal Wadhwa
·

5 min read

Adding SASS to your Webpages

Table of contents

Hello World. Let's learn about SASS and why you should use it.

Introduction

Syntactically Awesome Style Sheets (SASS) is a preprocessor to Cascading Style Sheets(CSS). SASS is a language that extends and adds upon the features available in CSS. Browsers unfortunately do not understand SASS scripts so they are compiled down to CSS so they can used on the webpage being displayed. The SASS is transpiled into CSS using a transpiler, one such transpiler is the implementation of SASS using Dart. dart-sass is the implementation that always gets the latest features first.

SASS has two syntaxes, the original version being the indented syntax which uses the extension .sass. The SCSS version is similar to CSS and uses the .scss extension. SCSS is called the superset of CSS since all CSS is valid SCSS and this familiarity allowed it to be adopted much more easily.

Some of the features that SASS offers are

  1. Nesting
  2. Variables
  3. Modules
  4. Mixins
  5. Loops (for, while, each)
  6. Conditional Statments (if & else)
  7. Extending styles

In this article we will look at nesting and variables. All examples in this article follow the SCSS syntax.

Nesting

SCSS allows users to nest selectors just as one nest tags in HTML

Taking an example of the following HTML

<nav>
  <a>
    Title
  </a>
  <ul>
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>

The above HTML is styled using the CSS on the left but the same CSS can be rewritten in SASS using nesting where we know that the <ul> and <a> tag is nested inside <nav>.

CSS SCSS 
nav {
  display: flex;
  justify-content: space-between;
}

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

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


nav {
  display: flex;
  justify-content: space-between;

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

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


SASS however compiles the CSS differently. Let's have a look at how it's compiled. The table below shows how the selectors are combined by taking the outer with the inner selector.

SCSS CSS 
nav {
  display: flex;
  justify-content: space-between;

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

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


nav {
  display: flex;
  justify-content: space-between;
}

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

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


A helpful tip from SASS documentation itself

Nested rules are super helpful, but they can also make it hard to visualize how much CSS you’re actually generating. The deeper you nest, the more bandwidth it takes to serve your CSS and the more work it takes the browser to render it. Keep those selectors shallow!

A helpful tip that I've read is to keep the nesting upto a maximum of 4 levels that way it keeps the selectors shallow as the documentation suggests.

SASS Nesting works with selectors as well

SCSS CSS 
ul {
  > li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

h2 {
  + p {
    border-bottom: 1px solid black;
  }
}


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

h2 + p {
  border-bottom: 1px solid black;
}


Variables

SASS supported the use of variables much before CSS did but since then CSS has gained support for variables and they are called custom properties.

Let's have a look at SASS variables.

SCSS variables are compiled and replaced wherever they are placed as shown in the table below.

SCSS CSS 
$primary: #506fff;

body {
  background-color: $primary;
}


body {
  background-color: #506fff;
}


Example of the imperativeness of SASS Variables: If values are updated they do not update the previous use of the variable.

SCSS CSS 
$primary: #506fff;

body {
  background-color: $primary;
}

$primary: #aa6098;

div {
  border: 1px solid $primary;
}


body {
  background-color: #506fff;
}

div {
  border: 1px solid #aa6098;
}


Let's have a look at the difference between SASS and CSS variables as described by their documentation.

SCSS CSS
Sass variables are all compiled away by SASS. This means the variables are not included in the CSS output once compiled. CSS variables are included in the CSS output.
Sass variables only have one value at a time. CSS variables can have different values for different elements
SASS variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses.

Conclusion

We've just seen how two of the features of SCSS can be used to make writing CSS easier. Nesting makes it easier to understand the CSS being applied to the HTML and Variables make it easier to avoid repeated typing of values in the SCSS file. Let's have a look at some more of the features that SASS provides in the next post.

scssCSS