Sass

Intro

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

Installation:

   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

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

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;
   }

http://sass-lang.com/


@msvaljek