Sass

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS. It is more stable and powerful CSS extension language that describes the style of document structurally.

Features of Sass

• It is more stable, powerful, and compatible with versions of CSS.
• It is a super set of CSS and is based on JavaScript.
• It is known as syntactic sugar for CSS, which means it makes easier way for user to read or express the things more clearly.
• It uses its own syntax and compiles to readable CSS.
• You can easily write CSS in less code within less time.
• It is an open source pre-processor, which is interpreted into CSS.

Advantages of Sass

• It allows writing clean CSS in a programming construct.
• It helps in writing CSS quickly.
• It is a superset of CSS, which helps designers and developers work more efficiently and quickly.
• As Sass is compatible with all versions of CSS, we can use any available CSS libraries.
• It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values.

Converting Syntax:

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

Store data in Sass

One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.

In JavaScript, variables are defined using the letand constkeywords. In Sass, variables start with a $followed by the variable name.

Example:

$main-fonts: Arial, sans-serif; $headings-color: green; //To use variables: h1 {   font-family: $main-fonts;   color: $headings-color; }

Nest CSS with Sass

Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.

nav {

  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}