Students should be able to:
Sass stands for Syntactically Awesome StyleSheets. Sass allows you to add more advanced syntax - like variables and functions - to your stylesheets. It is a CSS preprocessor that converts SCSS (Sassy CSS) into vanilla CSS.
A pre-processor is a tool that will process your code and compile it to a new format that adheres to the requirements of your environment. Think babel - this compiles our fancy ES6 syntax back down to ES5 so that it can be supported in older browsers.
Sass was originally part of another preprocessor called Haml. It used no curly braces or semi-colons, and the syntax adhered to strict spacing and indentation rules. Like so:
Developers liked the additional control we had over writing our stylesheets, but wanted a syntax more similar to vanilla CSS. This is where SCSS comes in.
Take a look at the SCSS in this codepen. Write down any syntactical similarities and differences you notice between SCSS and the plain CSS you're familiar with.
Although both Sass and SCSS are both still viable languages to use, movement has shifted significantly toward SCSS for several reasons:
CSS in large apps can get crazy. Making changes to these large apps is tedious and extremely error prone. Sass makes it easier to change colors, fonts, and other properties by keeping your code DRY.
Some of the cool tricks include defining variables that can be peppered across multiple CSS files, nesting elements to visibly reflect the HTML element relationships, using math equations to adjust sizes and values, adjusting colors using more intuitive language like “darken” and “lighten”, and bundling groups of styles together to easily reference throughout your CSS…to name a few.
One of the most obvious and immediately useful features of Sass is the ability to define variables.
As developers we strive to write DRY, clean code, and storing values for CSS styles as variables contributes to that. This means we can make color changes in one place, and the change will be reflected anywhere that the variable is referenced.
Variables are defined by a $ immediately preceding the name of the variable (like jQuery!), and a colon separating the name of the variable from the value. For example:
Downsides pretty minimal but there's this big list anyway: https://adamsilver.io/articles/the-disadvantages-of-css-preprocessors/