Learn the basics of SASS in 20 minutes or less

Syntactically awesome style sheets or SASS for short is a CSS pre-processor that allows developers to write code in one language before compiling it into another. SASS is an extension of CSS, which allows you to create your stylesheets faster and cleaner.

Here at Weeare we use SASS to cut down on our development time and keep our CSS more organised, so in this article we will be giving a tutorial on how to understand the basics of SASS in 20 minutes or less. Depending on the feedback of this tutorial we may publish more tutorials on this website.

SASS intro

We use the syntax form of SCSS here when developing SASS files, SCSS known as Sassy CSS needs to be compiled before your code will work, you have a few options when it comes to compilers. You can either:

• Compile files manually through the terminal
• Use Grunt
• Use a third party desktop app such as CodeKit (paid) or Koala (free)

Check all of the above out and decide which one you would like to use, If you are a beginner and want an easy way of setting up and just messing around with SASS then I recommend one of the desktop apps. CodeKit and Koala are both easy to use and great tools.

I wont take you through installing any of the above because the documentation on both websites is easy enough to follow. Once you are set up you are ready to begin learning the SASS language.

Variables in SASS

One of the greatest features of SASS in my opinion is the use of variables. If you are coming from another programming language you will welcome variables with open arms. SASS variables store a value which you will often repeat inside of your code. For example you wanted to set colors for your website, rather that using the conventional method of writing #000 every time you wanted black to appear in the site you would first set a variable such as:

$main-color: #000;

From there on out if you wanted a black background, title, or font color you could use:

.main-div{
 background-color:$main-color;
}

h1{
 color:$main-color;
}

p{
 color:$main-color;
}

Now you may be thinking what is the point of this? Well the thinking behind this is that it allows us to use the same values more quickly, you don’t have to remember crazy hex codes or font families you simply remember the variable name. Would you rather write $secondary-color or #98B52E throughout the site 100 times.

SASS variables save you time when writing out but also when you want to change values, imagine your client has decided that they now want to change the primary color to a darker shade and rather than having to change the #98B52E color 100 times, you can simply change the value of $secondary-color once and the 100 values are changed instantly.

SASS Variable data types

You can use SASS variables to store a wide variety of data, this is shown below.

$main-font-text: ‘Open Sans’, sans-serif;
$primary-color: #000;
$header-font-size: 20px;

SASS Mixins

Mixins are a block of code that you create once and then can reuse through out your project. If you are from a JavaScript background then you can think of mixins as a function. Like a function a mixin can take multiple parameters and can output some data, the data in this instance would be CSS.

One of the main purposes of SASS is to allow you to create well organised CSS and mixins are great for this as they allow you to write clean and DRY code, if your not familiar with DRY then you probably haven’t tried any Ruby on rails tutorials. DRY is a principle that stands for Do Not Repeat Yourself.

At Weeare we use mixins all of the time, one of our favourites can be seen below:

First you define a mixin by using the @mixin then you give the mixing a name, and any arguments that you want to use.

@mixin transition($args){
 -webkit-transition: $args;
 -moz-transition: $args;
 -ms-transition: $args;
 transition: $args;
}

To use the mixin above in my code I would call it like below:

.someDiv{
 color: $primary-color;
 font-size:$primary-font-size;
 background: $main-bg;
 @include transition(all 0.3s ease-in-out)

&:hover{
 color: $secondary-color;
 font-size: $secondary-font-size;
 background: $secondary-bg;
 }
}

The above may look confusing but let me break it down. Firstly we create a div called ‘someDiv’ and give it a color, font size and background. We then call our created mixin and pass it three arguments:

• All – signifies we want to transition all of the properties of the div.
• 0.3s – this tells the transition mixin how long to carry out the transition.
• ease-in-out – tells the transition how to animate.

The &:hover code is what SASS uses when the element your inside of is hovered over. In this case when ‘someDiv’ is hovered over the color, font-size, and background will change. The mixin we created above is useful for any time you want to creat transitions without having to write out the browser prefixes every time.

SASS Extend

@extend allows an element to extend upon another, so rather than creating more elements that needed you can create one and extend it. For example, imaging you needed 4 different buttons on your website. In CSS you could do something like this:

.button1{
 text-align:center;
 display:inline-block;
 padding:10px 15px;
 color:#fff;
 background:#000;
 font-size:15px;
}

.button2{
 text-align:center;
 display:inline-block;
 padding:10px 15px;
 color:#000;
 background:#fff;
font-size:15px;
}

.button3{
 text-align:center;
 display:inline-block;
 padding:10px 15px;
 color:red;
 background:white;
 font-size:15px;
}

.button4{
 text-align:center;
 display:inline-block;
 padding:10px 15px;
 color:green;
 background:black;
 font-size:15px;
}

As you can see the above code repeats its self a lot, and we now know the DRY principle, so lets use SASS to get rid of the repetition. First create a button class that all the other classes can extend upon.

.button{
 text-align:center;
 display:inline-block;
 padding:10px 15px;
 font-size:$button-text;
}

.button2{
 @extend .button;
 background-color:black;
 color:white;
}

.button3{
 @extend .button;
 background-color:red;
 color:black;
}

.button4{
 @extend .button;
 background-color:orange;
 color:green;
}

The above code cuts the original code down considerably and now we are only creating other elements that are different rather than repeating ourselves. We are also making life easier for ourselves, imagine your client now wants you to make all your button text bigger, instead of changing the text size 4 times from the original code we would now only have to change this once.

You may think that so what, 4 times is nothing, but in the real world you could be working with CSS files 3000 lines long and having to look through that to change a few values is time consuming.

Nesting Code

In my opinion the best feature of SASS is being able to nest code. This is an absolute time saver and being able to nest code will keep your code DRY and clean. Take the following example in CSS:

.mainDiv{
 background:black;
}

.mainDiv ul{
 list-style:none;
}

.mainDiv ul li{
 display:inline;
}

.mainDiv ul li a{
 color:blue;
}

If you look at the above code you will notice the amount of times we have repeated our self by typing out .mainDiv, in SASS we can get rid of this repetition by only typing out the different elements and nesting them:

.mainDiv{
 background:black;

     ul{
        list-style:none;
 
        li{
           display:inline;

           a{
             color:blue;
           }
        }
    }
}

The nesting does look more complicated and the brackets might put you off but if you indent your code correctly you will be able to see quite clearly where each element starts and ends. Using nesting in the code above has allowed us to only type out each element once, rather than 4 times. Nesting will save you tonnes of time, if SASS only allowed you to nest and nothing else I would use it for that alone.

SASS Functions

Earlier we talked about mixins as functions, but SASS has some in built functions that you can use right out of the box. Ones that I use quite a lot are darken, lighten and transparentize.

You can use the above like this:

.someDiv{
 background: darken($main-color, 10%);
 color: lighten($main-color, 5%);
}

For a full list of SASS functions you can check out:

http://sass-lang.com/documentation/Sass/Script/Functions.html

SASS conclusion

Before using SASS I thought of it as another fad, you know something that is all hype then will drift away into the darkness. But using SASS has allowed us to improve our workflow which means that we can pass along those savings to our customers. This is great for us as it allows us to make the same awesome websites more quickly without sacrificing on quality.

In this blog post we have only scratched the service, there is so much more to SASS than we could fit into one post, but we wanted to give you a taster. If you want to learn more about SASS then check out the following reading list:

SASS and compass for designers
SASS and compass in action
SASS Essentials

The reason we love sass here at weeare is that it allows us to develop quicker, which leaves us more time to concentrate on services such as search engine optimisation and social media marketing.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close