Getting started with SASS | Digital Phoenix Agency
21 Jul 2016
21 Jul, 2016

Hello devs!

You may ask yourself, why would we ever want to use SASS? Well, it's basically going to allow us write more maintainable code faster, in less code, in less time. In this tutorial we will cover the basics and some great features of SASS.
Now, with CSS you're normally going to be targeting individual elements and then styling those elements, and the problem with that is if you use the same properties for multiple elements you're going to have to type those properties over and over again and repeat yourslef.

SASS is meant to solve this problem for us. SASS stands for Syntactically Awesome Stylesheets Sass, and was created by Hampton Catlin. Sass introduces new concepts like variables, mixins, and nesting into the CSS code we already know. These concepts ultimately make our CSS awesome, easier to write and more dynamic. All of these features combined, speed up our workflow as front-end developers.

Before we go forward, I want to make sure you don't get confuse by the two syntaxes that SASS has. These are simply two different ways to write the code, both produce the same output. For more information about this you can read the documentation.

I personally like and use .scss, and I will be using the .scss syntax in this article.

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.
 

Variables

Ok, so variables are a way to store information that we can reuse throughout our document. SASS accepts values for variables such as numbers, strings, colors, null, lists and maps. To declare a variable in SASS we do $ followed by the name of the variable, in this case let's say primary-color, a colon and then the value of that variable.

// Defining our variables. 
// You can use HEX or RGB values as well. $primary-color: tomato; 
// Applying them. 

.wrapper { 
background-color: $primary-color; 
color: $primary-color; 
}  

So this automatically compiles to CSS:

 .wrapper {
    background-color: tomato;
    color: tomato;
  }

Nesting

Nesting styles is very simple. We just enclose a selector (or selectors) inside the curly braces of another selector. Here's a simple example of using nesting SASS:


.wrapper {
  background-color: $primary-color;

  p {
    color: $primary-color;
  }
} 

This compiles to CSS

.wrapper {
    background-color: tomato;
  }
.wrapper p {
    color: tomato;
} 

Of course, nesting can extend as many levels deep as we want. There is really no limit to the amount of levels deep that we can nest elements. But, it is generally a good practice to not nest deeper than three levels.

Extend/Inheritance

We can extend styles from other declarations using this powerful feature. To use it, we use the Sass keyword @extend, followed by a selector that we want to inherit from, and all of the selector's style properties will be inherited from that selector.

Let's look at this example in SASS:

.button {
  // Button styles.
  width: 100px;
  height: 50px;
  border-radius: 10px;
}

.button-primary {
  @extend .button;
  // Primary button styles.
  background: tomato;
}

.button-secondary {
  @extend .button;
  // Secondary button styles.
  background: skyblue;
} 

In CSS this will look like:

.button, .button-primary, .button-secondary {
  width: 100px;
  height: 40px;
  border-radius: 10px;
}

.button-primary {
  background: tomato;
}

.button-secondary {
  background: skyblue;
} 

We can extend a declaration with a set of styles that doesn't even exist. For that, we are going to use the the placeholder selector. The placeholder selector works by prefixing a class name of your choice with a % symbol. Let's look at this example in SASS:
 

%box-size {
  height: 100px;
  width: 100px;
}

.box-one {
  @extend %box-size;
  background-color: tomato;
}

.box-one {
  @extend %box-size;
  background-color: skyblue;
} 

Mixins

Mixins are one of the greatest features that Sass have. They allow us to create our own functions and pass in variables. This is also very useful for properties that need vendor prefixing. To define a mixin, we use the @mixin Sass keyword, followed by the name you've chosen for the mixin. If you require any parameters, include a pair of parentheses and your arguments. Including the mixin is easy, we use the @include Sass keyword followed by the mixin name with any parameters declared in parentheses.

Let's try a simple example in SASS:

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

// We apply it here.
.wrapper {
  @include border-radius(10px);
} 

So this compiles to:

.wrapper {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Conclusion

As you can see, SASS is extremely powerful and I have only covered some of the basics and the main features that makes it so powerful. I totally recommend digging into the Sass reference to learn more.

Here are some resources I also find useful:
thesassway.com
sassisfaction.com

Ready to get Started?