SASS: "Syntactically Awesome Style Sheets"
A Mild Introduction
WHAT IS SASS AND WHAT IS IT USED FOR?
SASS stands for “Syntactically Awesome Style Sheets.” It is a CSS (Cascading Style Sheets) pre-processor (A CSS pre-processor is a program that generates CSS code using a unique syntax). SASS is used for its ability to make CSS structure more readable and easier to maintain. Some other CSS pre-processors include LESS, Stylus and PostCSS.
WHAT IS NEEDED TO SET UP SASS?
I will be using a code editor, Visual Studio Code (VSC), to utilize SASS. The two file types for using SASS, with .sass and .scss file extensions, cannot be read by the browser. They need to be changed into .css files. For this, download the Live Sass Compiler extension in VSC. This extension will make it so that the .sass and .scss file types will compile into a css file upon saving. After saving, two CSS files are created within the same directory. The main.css file contains the CSS code compiled from the SASS code in the .scss file. The main.css.map file can be ignored for the purposes of this blog. SASS code can be written into a .scss file, which is how SASS is utilized in the following code samples below.
CODE SAMPLE EXAMPLES
CODE SAMPLE 1
SASS allows the user to create variables. Variable names in SASS start with a "$" like the examples below:
SCSS Code
$firstColor: #FAADF1;
$secondColor: #F097AE;
$thirdColor: #E08EFA;
$fourthColor: #9DCCFA;
$fifthColor: #A8F0E6;
These variables may be used in the .sass or .scss code as shown below.
SCSS Code
body{
background: $firstColor;
width: 80%;
margin: 0 auto;
}
In the .css file, the variables are shown as what they store, compiling into basic CSS.
Compiled CSS Code
body {
background: #FAADF1;
width: 80%;
margin: 0 auto;
}
CODE SAMPLE 2
SASS also has maps. Maps look similar to Javascript objects and hold key : value pairs within a variable. Below is a map example with three key : value pairs set within the $font-weights variable.
SCSS Code
$font-weights: (
"thin": 100,
"normal": 400,
"bold": 700
);
The map is used in the .sass or .scss file as shown in the following code sample:
SCSS Code
h3{
font-weight: map-get($font-weights, bold)
}
Compiled CSS Code
Again, here the compiled .css file appears in basic CSS.
h3 {
font-weight: 700;
}
CODE SAMPLE 3
SASS allows nesting. Selectors can be nested within selectors accordingly if they are a child element of a selector in that code block. An example is shown below:
SCSS Code
div{
background-color: $fourthColor;
p{
background-color: $fifthColor;
}
}
Compiled CSS code
Finally, here the compiled code appears in basic CSS again.
div {
background-color: #9DCCFA;
}
div p {
background-color: #A8F0E6;
}
CONCLUSION
Beyond the variables, maps and nesting examples above, there is much more that can be done with SASS that makes it a popular coding tool (CSS pre-processor) among CSS enthusiasts.