The Power of SASS !! Stop Using CSS !!

 

 The Power Of SASS

What is Sass?

• Sass stands for Syntactically Awesome Stylesheet
• Sass is an extension to CSS
• Sass is a CSS pre-processor
• Sass is completely compatible with all versions of CSS
• Sass reduces repetition of CSS and therefore saves time
• Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
• Sass is free to download and use

Why Use Sass?

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

How Does Sass Work?

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.

This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

Syntax

Sass includes two syntax options:

1. SCSS (Sassy CSS): using the .scss file extension and is fully adjective with CSS syntax

2. Indented (simply called ‘Sass’): using .sass file extension and indentation rather than

brackets; it is not fully adjective with CSS syntax, but it’s quicker to write

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

Variables

Sass Variables allow you to define a value once and use it in multiple places. Variables begin with dollar signs and are set like CSS properties. if you wanted to set the same height for two different selectors, you could create a variable called $control-height

 $control-height:40px;

Features of Sass

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

Sass Advantages

• Sass facilitates you to write clean, easy and less CSS in a programming construct.
• It contains fewer codes so you can write CSS quicker.
•  It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.
• It is compatible with all versions of CSS. So, you can use any available CSS libraries.
• It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions, and other values.

Sass disadvantages

• The developer must have enough time to learn new features present in this preprocessor before using it.
• Using Sass may cause losing benefits of browser’s built-in element inspector.
• Code has to be compiled
•  Difficult  Troubleshooting