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.

Updated June 8, 2016 by Per C.

quizTest Your Knowledge

Skinny horizontal ads on websites are called what?

A
Banner ads
0%
B
Bracket ads
0%
C
Table ads
0%
D
Label ads
0%
Correct! Incorrect!     View the Banner Ad definition.
More Quizzes →

The Tech Terms Computer Dictionary

The definition of Sass on this page is an original definition written by the TechTerms.com team. If you would like to reference this page or cite this definition, please use the green citation links above.

The goal of TechTerms.com is to explain computer terminology in a way that is easy to understand. We strive for simplicity and accuracy with every definition we publish. If you have feedback about this definition or would like to suggest a new technical term, please contact us.

Sign up for the free TechTerms Newsletter

How often would you like to receive an email?

You can unsubscribe or change your frequency setting at any time using the links available in each email.

Questions? Please contact us.