Sass

Intro

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

Installation:

?

1	gem install sass

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

?

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

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

?

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

Variables

Variables are declared with $variable_name:

?

1 2 3 4

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

Nested rules

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

?

1 2 3 4 5 6

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:

?

1 2 3 4 5 6 7 8

@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:

?

1 2 3 4 5 6 7 8 9

.myrounded {     -webkit-border-radius: 5px;     border-radius: 5px; }   #box3 {     @extend .myrounded;     color: yellow; }

http://sass-lang.com/


@msvaljek