Introduction to Sass for Beginners

CodingRaul Dronca • April 11, 2017 • 3 minutes READ

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:

• Hammer
• CodeKit
• Compass
• Koala

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.