what is sass

Byadmin

Sass (Systematically Awesome Style Sheets)

Sass stands for Systematically Awesome Style Sheets.

It is a CSS pre-processor. It is an extension of CSS that is used to add power and elegance to the basic language. It facilitates you to add variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax.

Sass is a more stable and powerful CSS extension language that describes the style of a document cleanly and structurally. It is very useful to handle large style sheets by keeping them well organized and running quickly small style sheets.

What is a CSS preprocessor?

A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Sass is perhaps the most popular preprocessor around, but other common examples include Less and Stylus.

Before we go any further, I feel like a quick public service announcement is in order: if you’re new to CSS, I do not recommend using any preprocessors (like Sass). The same goes for any other extensions or frameworks. While it’s true they offer many advantages in speed and efficiency, it’s more important that you first understand the basics of CSS. Make sure you learn the core concepts before you start exploring shortcuts.

Features of Sass

  1. Sass is fully CSS-compatible.
  2. It is more stable, powerful and elegant than CSS.
  3. It is based on JavaScript and is a superset of CSS.
  4. It has its own syntax and compiles to readable CSS.
  5. It is an open-source pre processor that is interpreted into CSS.
  6. It supports language extensions such as variables, nesting, and mixins.
  7. It provides many useful functions for manipulating colors and other values.
  8. It provides many advanced features like control directives for libraries.
  9. It provides well-formatted, customizable output.

Syntax

Sass includes two syntax options:

  • SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax
  • Indented (simply called ‘Sass’): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it’s quicker to write

Note that files can be converted from one syntax to the other using the sass-convert command.