Introduction
SASS stands for Syntactically Awesome Style Sheets. A preprocessor scripting language is interpreted or compiled into Cascading Style Sheets(CSS). SASS is an extension of CSS and is compatible with all CSS versions. It also helps reduce the repetition in CSS and save time.
Stylesheets get more extensive and complex as we start working on big projects, making it hard to handle the data, not to mention debugging it. Sass allows using features that do not exist in CSS, like variables, inheritance, built-in functions, nested rules, mixins, imports, etc. An endless number of frameworks are built using Sass like Compass, Bourbon, Susy, etc.
SASS Variables
Sass Variables allow defining a value once and re-using it in multiple places. These variables begin with a dollar sign($) and are set like CSS properties. With the help of Sass, we can store information in variables like
- String
- Number
- Colors
- Boolean
- Nulls
- Lists
Syntax:
$name: value;
Note: SASS Variables treats hyphens and underscore in the same way.
Examples of Sass Variables
Example 1:
Sass File
.header {
height: $control-height;
}
.sub-header {
height: $control-height;
}
When translated into CSS, it will become:
.header {
height: 40px;
}
.sub-header {
height: 40px;
}
This feature of Sass is extremely useful in large projects where if a single value is used multiple times and required to be changed, we can change the value at one place that will take care of the variable’s value at all places in the project.
Example 2: The following example declares four variables named myFont, myColor, myFontSize, and myWidth that can be used anywhere in the project.
Output.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="input.css">
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
<div id="container">This is some text inside a container.</div>
</body>
</html>
Sass File
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
When transpired into CSS, it will become:
Input.css
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
Output:
When the Sass file is transpired into the input.css file, it takes values assigned to the variable and generated output accordingly.
311+ registered 
