Sass

Stands for "Syntactically Awesome Style Sheets." Sass is an extension of cascading style sheets (CSS), the language used to define the layout and formatting of HTML documents. It uses fully-compatible CSS syntax, but provides additional features like CSS variables and nested rules that make CSS more efficient and easier to edit.

One of the drawbacks of standard CSS is that it does not support variables. For example, if you have multiple styles that are the same color, you need to define the color separately for each style. If you decide to change the color, you must change it for every instance in the the CSS document. With Sass, you can define the color as a variable and assign the variable to every style that uses it. If you decide to change the color, you only need to change it once — where it is initially defined in the document.

The below example shows how to define and use a CSS variable in Sass.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass also supports nested rules, allowing developers to write more efficient code. In the example below, the .button class is nested within the #top p style.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

When compiled, the above code will produce the following CSS:

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

While Sass provides several benefits to web developers, Sass documents are not recognized by web browsers. Therefore, a Sass file must first be compiled into CSS before being used in an HTML document. This can be done locally before uploading the CSS to the web server using program like Compass.app or Koala. It can also be compiled on the server using a PHP or Ruby script that compiles Sass into CSS.