Home : Internet Terms : Sass Definition

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

Cite this definition:

https://techterms.com/definition/sass

TechTerms - The Tech Terms Computer Dictionary

This page contains a technical definiton of Sass. It explains in computing terminology what Sass means and is one of many Internet terms in the TechTerms dictionary.

All definitions on the TechTerms website are written to be technically accurate but also easy to understand. If you find this Sass definition to be helpful, you can reference it using the citation links above. If you think a term should be updated or added to the TechTerms dictionary, please email TechTerms!