Introduction to Sass for Beginners

  •  4 Comments

Sass stands for Syntactically Awesome Stylesheets. Sass and is basically just an extension to CSS that help us write more flexible styles.

It helps us make larger and complicated stylesheets clearer to understand and easier to maintain. Thanks to features like variables,  mixins, nesting, inheritance the code is more organized, allowing us to work quicker.

Be aware that when we write in sass, browsers are not going to understand our code, because it’s not CSS we’re writing, so we need to use a compiler to compile our sass code to CSS.

There are several apps that help you achieve this:

We’re not going to cover the whole process of installing and compiling sass in this section. If you want to experiment and follow me through this tutorial, I suggest using an online editor such as Codepad or whatever you prefer, without installing it on your machine.

Before we go forward, I want to make sure you don’t get confused by the two syntaxes of sass. These are simply two different ways to write the code; both produce the same output. I personally like and use .scss, and I will be using the .scss syntax in this article.

Variables

Variables are powerful because they allow you to change the code quickly. When defining a variable we store inside it a certain value, acceptable values for variables include numbers, strings, colors, null, lists and maps.

To declare a variable in sass you do $ followed by the name of the variable, in this case blue, a colon and then the value of that variable.

 $blue: #3498db;

Let’s see variables in action:

/*
// We define the variables.
*/
$blue: #3498db;
$red: #e74c3c;
$background: #34495e;

/*
// We apply the variables.
*/
body {
  background-color: $background;
}

h1 {
  color: $blue;
}

p {
  color: $red;
}

Which compiles to this:

body {
  background-color: #34495e;
}

h1 {
  color: #3498db;
}

p {
  color: #e74c3c;
}

This is just a basic approach for using variables. You can do a lot more advanced stuff with variables, but will not going to cover it in this tutorial.

Nesting

Sass allows us to use CSS rules to be nested within one another. Nesting is an awesome way to organize and structure your CSS, and keeps you from unnecessarily repeating yourself. So let’s see an example of how powerful this feature is:

ul {
  list-style: none;

  li {
    padding: 10px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #333;
    }
  }
}

My recommendation is to not nest more than four levels, the code can get messy and cause problems, so keep it simple and cleaner.

Extend/Inheritance

Inheritance is one of the most useful features within sass and using extend let’s us share sets of CSS properties from one to another. This helps keep our sass very DRY.

Extending should be used when we need similarly styled elements, which still differ in some detail. For example, let’s make two buttons – a primary one and a secondary one.

$blue: #3498db;
$red: #e74c3c;
$white: #fff;

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: $white;
}

.btn-primary {
  @extend .btn;
  background-color: $blue;
}

.btn-secondary {
  @extend .btn;
  background-color: $red;
}

Which compiles to this:

.btn, .btn-primary, .btn-secondary {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}

.btn-primary {
  background-color: #3498db;
}

.btn-secondary {
  background-color: #e74c3c;
}

Do you see how powerful this feature is? Sass combined the selectors instead of repeating the same declarations over and over, saving us precious memory.

Mixins

Mixins are another awesome feature of sass.

Basically, a mixin allows us to make groups of CSS declarations that we want to reuse for our website. We can pass values as arguments, this allows our mixin to be more flexible.

Sass uses the @mixin directive to define mixins, and the @include directive to use them. Let’s build a simple basic mixin border-radius that we can use for buttons.

/*
// We declare the mixin.
*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

/*
// We apply it on our button.
*/
.btn {
  @include border-radius(4px);
}

Which compiles to this:

.btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

This is an efficient way of using mixins, if a property requires prefixes to work in all browsers.

Conclusion
This is it, a basic introduction to sass. Sass is an extremely powerful tool that helps us do some really incredible things. We’ll cover more cool and advanced stuff in the next tutorial.

Let me know what you think in the comments section.

Newsletter

4 Comments
  1. ginbrookesandy brookes Apr 14, 1:08 pm

    Just starting to look at SASS ; i’m assuming you load up the compiled version of the CSS, in which case why write $blue: #3498db; when you can just write background-color: #3498db; straight off into CSS ?

    or is it the case that SASS code is “interpreted ” on the fly like PHP? I was thinking that if the code had variables like $mycolor:#fff; maybe that value could be changed on the fly. You can change elements of a web oage using JQuery , so what the advantage of SASS?

    • Marius Apr 16, 11:21 am

      No, SASS is a “compiled language”, after the compile process you will have a good old CSS file.

      In a nutshell you should use SASS to break your styles into modules and also SASS works very well for techniques like BEM.

    • Matt Murtaugh Apr 18, 11:49 pm

      SASS variables are great because you have to change a value in one place, and it will change it everywhere.

      I’ll give you a made up example. A few years ago Spotify changed the shade of green they use. If their stylesheets for their website were using SASS variables, they could have changed that shade of green everywhere on their site by changing the variable. They wouldn’t have had to hunt down each individual time the color was applied.

      This can save you a massive amount of time.

    • Kris Apr 19, 12:23 pm

      A good example would be if you needed to change the hex value of that blue colour if say the colour pallet for the site you are working on changes, you can literally replace it in one place (normally where you declare your variables) and it will then re-compile on save and change everywhere it needs to in your CSS. Loads quicker than doing a find / replace.

      Just one of the many good uses for SASS :-)

Leave a Reply

*
* Minimum length: 20 characters