What is Sass ? how to use it and compile ?

What is Sass ?

Sass is a CSS preprocessor

Sass stands for Syntactically Awesome Style Sheets. It is a CSS preprocessor. The syntax is .scss (example style.scss) and output file can be style.css. It is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster.

First Sass appeared in 2006. It is open-source and coded in Ruby.

What is 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.

How to use it ?

Using is pretty easy way. See the Sass Documentation for additional references and examples.

Let me few examples in writing the Sass.

Example for Variable.

The following CSS will be produced

Example of Nested.

The CSS output is as follows:

There are many properties in writing CSS with ease like extent, import, Mixins, partials, operators. The idea is that with this directive you won’t have to include multiple class names on your HTML elements and can keep your code DRY.

For more to learn follow the Sass Community Guidelines.

How to compile ?

There are many tools for compiling the Sass which are paid and free. The popular free tool is Koala-app  and Scout-App which is easy to compile ans shows the errors with line numbers. Just drag and dropping the file folder to the tool and give the output path.

For more to learn follow the Koala-Doc and Scout-Doc



You may also like...