Get Started Using Sass

What is Sass?


Sass is a preprocessor for css. Sass lets you do things that are not possible with just css. Things such a variable, nesting, mixins and more. It will allow you to write css faster and more efficient. The great thing about Sass is all valid css is valid in sass.

Getting started with Sass


To start using sass all you have to do is change your file extension from .css to .scss. Congratulations you are now using sass.

Throughout this post when I am referring to “Sass” I am referring to the .scss version of sass not the old .sass version as these use different syntax.

Setting up file structure for Sass


One thing that makes sass very useful is you can break up each section of you css into its own file. For instance you could have a reset.scss, typography.scss, header.scss, footer.scss, etc. You can break up you sass into as many files as you want.

I like to put all my sass files inside there own folder inside the css folder to help keep thing organized.

Your maybe wondering how you get all your sass files into a css file. To do this you need to have one sass file to import all your sass files together. I tend to name this whatever I want the compiled css file to be named. If you want your outputted css file to be named styles.css I would name this style.scss.

Example of how this looks

//styles.scss
@import 'reset';
@import 'bits';
@import 'typgraphy';
@import 'mainstructure';
@import 'mainnav';
@import 'header';
@import 'footer';

Sass Compiler

Now you will need a compiler to compile your sass files to a css file. This will take the file that has all the @import statements and compile it all together to one css file.

The Sass compiler I prefer to use is CodeKIt

The Good Stuff


Variable and Mixins are what make sass powerful and fun to use. It is best to create a sass file to put your variables and mixins in. I like to name this file something like bits.scss because it is the bits I am going to use throughout my sass.

Pro Tip: when using sass you can use single line commenting just like you can in javascript.

//Sass Comment you can only see in the sass files, does not compile

/* CSS Comment you will see this in the compiled css file */

Sass Variables


One of the most wanted features of css is variables (hopefully someday) but for know we don’t have them. Luckily Sass has variables and they are very simple to use.

Some great things to use variables for are for your colors scheme, and media queries breakpoint.

Example

How to use in the bits.scss file

//Breakpoints
$i4: 540px;
$v6: 800px;
$v8: 1000px;
$v10: 1200px;

//Colors
$maincolor1: #1fd100;
$maincolor2: #262626;

How to use in your other sass files

@media screen (min-width: $i4) {
    div {
        background: $maincolor2;
        color: $maincolor1;
    }
}

Outputted CSS

@media screen (min-width: 540px) {
    div {
        background: #262626;
        color: #1fd100;
    }
}

Sass Mixins


Sass Mixins allow you to have chunks of code you will use many times throughout your site or for CSS3 vender prefixes that are annoying to type and remember.

Example

How to use in the bits.scss file

//Note the comma between ‘$prop’ and ‘$time’
//‘transition’ is just the name of the mixin. This can be whatever you would like 
@mixin transition ($prop, $time) {
    -webkit-transition: $prop $time;
    -moz-transition: $prop $time;
    -ms-transition: $prop $time;
    -o-transition: $prop $time;
    transition: $prop $time;
}

@mixin main-font-1 {
    font-family: helvetica, Arial,  sans-serif;
    font-weight: 800;
    font-style: normal;
}

How to use in your other sass files

a {
    @include transition(background, .25s);
    @include main-font1;    
}   

Outputted CSS

a {
    -webkit-transition: background .25s;
    -moz-transition: background .25s;
    -ms-transition: background .25s;
    -o-transition: background .25s;
    font-family: helvetica, Arial,  sans-serif;
    font-weight: 800;
    font-style: normal;

}

Sass Nesting


Sass nesting help make it easier to write and read your sass. Nesting may look a bit odd at first but you will start to like it after you using sass for a while

Nesting Example

header {

    nav {

        ul {

            li {

                a {

                }

                a:hover {

                }
            }
        }
    }
}

Outputted CSS

header {
}

header nav {
}

header nav ul {
}

header nav ul li {
}

header nav ul li a {
}

header nav ul li a:hover {
}

Something important to note is if there is no css inside one of the declaration the sass compiler shouldn’t not output anything so don’t worry about leaving about leaving them blank declarations in your sass files.

Using Variables inside of Mixins


You can use variables inside of mixins. You can even use mixins inside of other mixins. It is amazing how much cleaner your working sass files become when using mixins and variables.

Example

//bits.scss
@mixin button {
    background: $maincolor1;
    @include transition(background, .25s);
}


//someotherscss.scss
.button {
    @include button;
    /*Other CSS*/
}

button {
    @include button;
    /*Other CSS*/
}

Outputted CSS

.button {
    background: #1fd100;
    -webkit-transition: background .25s;
    -moz-transition: background .25s;
    -ms-transition: background .25s;
    -o-transition: background .25s;
    /*Other CSS*/
}

button {
    background: #1fd100;
    -webkit-transition: background .25s;
    -moz-transition: background .25s;
    -ms-transition: background .25s;
    -o-transition: background .25s;
    /*Other CSS*/
}

Go Ahead and Try It


There is a lot here and learning sass can take sometime. Try just using a little here and slowly start using more and of it as you understand it. If you want to learn sass but this seems overwhelming start off changing the file extension and using variable then go from there.

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.