Do you often write CSS rules for pages and have to copy parts of the rules from file to file? You probably haven’t heard of the SASS extension that exists to help you solve this problem.

What is SASS?

SASS is a CSS extension that lends superpower and elegance to this formal simple style language. SASS gives you the ability to use variables, nested rules, mixins, inline imports, and more, all with fully CSS-compliant syntax.

The essence of this article is to give you an idea of how SASS works in different cases and it’s up to you to decide if you need it.

Syntax

For SASS there are two types of syntaxes: SASS & SCSS.

SASS provides a more concise way of working with CSS. It uses indents instead of braces to separate selector attachments and newlines instead of semicolons to separate properties. Syntax has the same functionality, as well as SCSS. Files that use this syntax have a

.sass extension.

SCSS (Sassy CSS) used throughout this article is the advanced CSS syntax. This means that each valid CSS style sheet is a valid SCSS file with the same logic. Files that use this syntax have a

.scss extension.

#css #saas #scss #css-variables #web-development

How to Make Better Use of SASS Extensions for Custom CSS Variables
2.35 GEEK