What is Sass and how does it work
This is a beginner friendly whirlwind tour of setting up Sass.
Sass stands for
Syntactically Awesome Stylesheets.
It is a CSS Pre-Processor meaning you are able to write programmable CSS. What's that mean? It means you have the ability to create reusable bits of Sass code to achieve your styling. You have ability to create variables, mixin (these are like function with arguments). You can split your CSS up into separate single purpose files with a good naming convention like
Sass files have a special extension
.scss and not
Sass allows you to keep your code DRY (Do not Repeat Yourself). It allows you to make variables e.g.
In order to use Sass you must install it on your machine, global or at project level. The next step assumes you have NODE JS installed, if you do not click here to do so first.
To follow along, manually create a website folder to work in that looks like this:
Then come back and run this command in the terminal.
Once Sass is installed you have access to the Command Line Tool (CLI). Running this command in the terminal will initiate Sass to take base.scss and save it to styles.min.css.
How it works
Here were are breaking up our CSS into logical modules.
base.scss will be our root file, this file will import the other partials. Sass will take care of compiling and generating one global.css file.
Sass will import these two files into one global context and generate one css file to be used in a simple html webpage.
Variables are key value pairs. The name of the variable followed by the value you want to use.
The above Sass will compile down to styles.min.css (based on my command above):
Notice that the variables have now resolved to their values the colours and font sizes setup in the Sass files.
Browsers do not understand files with the
.scss extension, which is why you need to install the sass compiler, it does the work of reading you Sass files and generating a css file for the browser.
What to know more?
Now there is a lot more to it than what I've shown also keep in mind technologies change over time, head over to the documenting @import phase out plan to keep up to date.