Post 22: What is SASS?

With SASS you can do:
SASS is a preprocessor that translates SCSS file into CSS file. In the SCSS file you can:

- nested configuration of your code
- define functions

It helps you to be DRY (Don't Repeat Yourself). ;)

How to get SASS:

Install ruby:

sudo apt-get install ruby 

Check if installation was successful:

ruby -v

On mine it says (maybe you'll get a more up-to-date version):

ruby 1.9.3p484 (2013-11-22 revision 43786) [i686-linux]

Install SASS:

sudo su -c "gem install sass"

or

gem install sass

Check if installation was successful:

sass -v

On mine it says (maybe you'll get a more up-to-date version):

Sass 3.4.10 (Selective Steve)

Install HAML:

sudo gem install haml

Check if installation is successful:

haml -v

On mine it says (maybe you'll get a more up-to-date version):

Haml 4.0.6

Start using SASS:
Open  your terminal and go to your project folder:

sass --watch test.scss:test.css

Now everytime you change the scss file it updates to correctly css file. You can use different styles of how the css file will be presented: nested (the default setting), compressed, expanded. In this example I want my css file to be production ready and therefore will choose the "compressed" style version:

sass --style compressed test.scss:test.css

Examples:

With SASS you can define variables in your stylesheet that you can't do it in your CSS file (yet). For example you don't want to remember the color #FA024C7, then you can define a variable for that.  In your SCSS file type in these:

$main-color: #FA024C7;

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

So, when ever you want to change the main-color you simply change in at one position instead of multiple positions.

With SASS you can also use Function. Let's say you want to have a rounded corner for a lot of elements in your page. Usually you'd have to write vendor-prefixes everytime you depending on the browsers you want to support the code can be very long. In SASSS you can define functions - so called mixins - to do this tedious and repetitive job for you:

@mixin rounded($radius: 5px){/*(optional) add a default value of 5px*/
    -webkit-border-radius: $radius; /*chrome, safari*/
    -moz-border-radius: $radius; /*firefox*/
    -ms-border-radius: $radius; /*IE*/
    -o-border-radius: $radius; /*opera*/
    border-radius: $radius; /*official form always at the bottom*/
}

#box{
    @include rounded;/*without argument*/
    @include rounded(10px);/*with argument*/
}

#box2{
    @include rounded;
}

The code will be translated into CSS file and looks like this:

#box {
  /*(optional) add a default value of 5px*/
  -webkit-border-radius: 5px;
  /*chrome, safari*/
  -moz-border-radius: 5px;
  /*firefox*/
  -ms-border-radius: 5px;
  /*IE*/
  -o-border-radius: 5px;
  /*opera*/
  border-radius: 5px;
  /*official form always at the bottom*/
  /*without argument*/
  /*(optional) add a default value of 5px*/
  -webkit-border-radius: 10px;
  /*chrome, safari*/
  -moz-border-radius: 10px;
  /*firefox*/
  -ms-border-radius: 10px;
  /*IE*/
  -o-border-radius: 10px;
  /*opera*/
  border-radius: 10px;
  /*official form always at the bottom*/
  /*with argument*/ }

#box2 {
  /*(optional) add a default value of 5px*/
  -webkit-border-radius: 5px;
  /*chrome, safari*/
  -moz-border-radius: 5px;
  /*firefox*/
  -ms-border-radius: 5px;
  /*IE*/
  -o-border-radius: 5px;
  /*opera*/
  border-radius: 5px;
  /*official form always at the bottom*/ }

/*# sourceMappingURL=testSCSS.css.map */

A lot of repetition. We can do better. See selector inheritance:

selector inheritance:

@mixin rounded($radius: 5px){/*(optional) add a default value of 5px*/
    -webkit-border-radius: $radius; /*chrome, safari*/
    -moz-border-radius: $radius; /*firefox*/
    -ms-border-radius: $radius; /*IE*/
    -o-border-radius: $radius; /*opera*/
    border-radius: $radius; /*official form always at the bottom*/
}
.rounded{
    -webkit-border-radius: 5px; /*chrome, safari*/
    -moz-border-radius: 5px; /*firefox*/
    -ms-border-radius: 5px; /*IE*/
    -o-border-radius: 5px; /*opera*/
    border-radius: 5px; /*official form always at the bottom*/

}

#box3{
    @extended .rounded;
    color: red;
}

The code will be translated into CSS file and looks like this:

.rounded {
  -webkit-border-radius: 5px;
  /*chrome, safari*/
  -moz-border-radius: 5px;
  /*firefox*/
  -ms-border-radius: 5px;
  /*IE*/
  -o-border-radius: 5px;
  /*opera*/
  border-radius: 5px;
  /*official form always at the bottom*/ }

#box3 {
  @extended .rounded;
  color: red; }

Much shorter!

If you need help:

sass --h

If you have any questuibs or want me to get into more details or cover other SASS topics let me know. :)