What is SASS and how does it work?

SASS (Syntactically Awesome Style Sheet)

Sass is a CSS preprocessor, an extension of CSS that adds power and elegance to the basic language.

Examples of the 3 major CSS processors

• Sass
• Less
• Stylus

We use Sass handy features and tools that CSS doesn’t have but at the same time not changing the fundamental of CSS. First we write Sass code in Sass files instead of the Css code, then we run the Sass compiler that will convert the Sass we wrote into Css code. Hence we need to process our Css code fast, thus the name Sass preprocesser.  There are other preprocessor like Less and Stars.

SASS featues

• Variables: for reusable values such as colors, font-sizes, spacing etc.
• Nesting: to nest selectors inside of one another, allowing to write less code.
• Operators: for mathematical operations right inside of CSS.
• Partials and imports: to write CSS in diferent files and importing them all into one single file.
• Mixins: to write reusable pieces of CSS code.
• Functions: similar to mixins, with the difference that they produce a value that can be used.
• Extends: to make different selectors inherit declarations that are common to all of them.
• Control directives: for writing complex codes using conditionals and loops.

SASS AND SCSS : What’s the difference

They are two types of SASS syntax:

Sass syntax: This is the original syntax for SASS and it omits curly brackets {} and semicolon ;

SCSS syntax: Stands for Sass CSS syntax, Preserves the way the orignal CSS looks like.