Sass is an extension of CSS3 with nested rules, variables, mixins, selector inheritance and more.


   gem install sass

Edit .scss files and they get "compiled" into output css files. To do this use:

   sass --watch style.scss:style.css

Before going into production, it's a good practice to compress the output css files:

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


Variables are declared with $variable_name:

   $my-color: blue;
   body {
    background: $my-color;

Nested rules

Nicer style organization (ie. avoid repeating ul li selector):

   ul {
       background: red;
       li {
           display: inline;


Mixins behave like functions, use them when applying block of information to multiple properties like repeating vendor prefixes for rounded corners.

Declare a mixin with @mixin, specify the variables in the Parentheses, assign them a default value with ":". Call the mixin with @include mixin_name:

   @mixin rounded ($radius : 5px) {
       -webkit-border-radius: $radius;
       border-radius: $radius;

   #mybox {
       @include rounded(10px);

Selector inheritance

It's pretty much like classes in the OO programming, uses @extend keywoard:

   .myrounded {
       -webkit-border-radius: 5px;
       border-radius: 5px;

   #box3 {
       @extend .myrounded;
       color: yellow;



No comments: