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

Definitions by TechTerms.com

The definition of Sass on this page is an original TechTerms.com definition. If you would like to reference this page or cite this definition, you can 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 the Sass definition or would like to suggest a new technical term, please contact us.

Want to learn more tech terms? Subscribe to the daily or weekly newsletter and get featured terms and quizzes delivered to your inbox.

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.