Sass

Stands for “Syntactically Awesome Style Sheets.” Sass is an extension of cascading model sheets (CSS), the language used to outline the format and formatting of HTML paperwork. It makes use of fully-compatible CSS syntax, however gives further options like CSS variables and nested guidelines that make CSS more environment friendly and simpler to edit.

One of the drawbacks of ordinary CSS is that it doesn’t assist variables. For instance, when you have a number of kinds which might be the identical shade, it is advisable to outline the colour individually for every model. If you determine to vary the colour, you could change it for each instance within the the CSS doc. With Sass, you possibly can outline the colour as a variable and assign the variable to each model that makes use of it. If you determine to vary the colour, you solely want to vary it as soon as — the place it’s initially outlined within the doc.

The beneath instance reveals how to outline and use a CSS variable in Sass.

  $myColor: #00695C;

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

Sass additionally helps nested guidelines, permitting builders to put in writing more environment friendly code. In the instance beneath, the .button class is nested inside the #prime p model.

  #prime p
  {
    shade: #004D40;

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

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

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

While Sass gives a number of advantages to internet builders, Sass paperwork aren’t acknowledged by internet browsers. Therefore, a Sass file should first be compiled into CSS earlier than being utilized in an HTML doc. This may be executed regionally earlier than importing the CSS to the net server using program like Compass.app or Koala. It may also be compiled on the server using a PHP or Ruby script that compiles Sass into CSS.