sass / scss

Sass (Syntactically Awesome Stylesheets) is a module included in Haml. Sass is a CSS-based metalanguage designed to increase the level of CSS code abstraction and simplify cascading style sheet files.

Sass has two syntaxes:

• the old one - sass - is distinguished by the absence of curly brackets, in it nested elements are implemented using indents;
• new - SCSS ( Sassy CSS ) - uses curly brackets, like CSS itself.

Nested rules

One of the key features of Sass is the nested rules that facilitate the process of creating and editing nested selectors.

  #header
   background: #FFFFFF
 
   .error
     color: # FF0000
 
   a
     text-decoration: none
     &: hover
       text-decoration: underline

Will be compiled into:

  #header {
    background: #FFFF; 
 }
 #header .error {
    color: # FF0000; 
 }
 #header a {
    text-decoration: none; 
 }
 #header a: hover {
    text-decoration: underline; 
 }

CSS Variables

Sass adds constants and impurities to CSS. This makes it easier to maintain data integrity within a large set of styles. Constants allow you to set a value and use it inside styles, with the help of impurities the same can be done with a block of style attributes.

  $ linkColor: # 00F
 
 a
   color: $ linkColor

Will be compiled into:

  a {
    color: # 00F; 
 }

An example of the use of impurities, the similarity of functions:

  @mixin border-radius ($ radius, $ border, $ color) {
   -webkit-border-radius: $ radius;
      -moz-border-radius: $ radius;
       -ms-border-radius: $ radius;
           border-radius: $ radius;
     border: $ border solid $ color
 }
 .box {@include border-radius (10px, 1px, red);  }

Will be compiled:

  .box {
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border-radius: 10px; 
    border: 1px solid red; 
 }