Getting Started With Sass
August 3, 2020
5 min read
Sass is a CSS pre-processor which makes writing CSS more faster and efficient. This is just a faster way to grab the basic syntax of Sass and how to get started with easily. For more advanced concepts, check the Sass Documentation. CSS on it own can be fun and effective but as the document get larger and you write more code, it gets more difficult to maintain. Sass makes it easier to maintain much larger projects.
Basic HTML and CSS
Scss Vs Sass
Sass (Synthetically Awesome Style Sheet) is an older version of sass and it uses a
Scss (Sassy Scss) on the other hand is the current version of Sass.
- SASS - Syntactically Awesome StyleSheets: .sass extension
- SCSS - Sassy CSS: .scss extension
Compiling Scss To Css
The styling language of the browser is CSS. The browser understands CSS but not Scss. With that, our scss code must be compiled into css for the browser to understand.
There are many ways scss can be compiled into clean css code.
Sass is written is Ruby.
Ways to compile Scss Code
- Installing Sass through the command line with Ruby
- Installing compiling softwares such as Koala, Live Reload and Hammer
- Installing using npm globally and compiling the sass code to css using the command line
- VS Code Extensions
In this tutorial, I will use the VS Code Extension, feel free to skip the section if you already know how to set it.
Setting Up Sass For VS Code
Have Visual Studio Code installed.
Go to the extensions panel and search for
live sass compiler
Click on the Extension by Ritiwck Dey and Install it. (Reload VS Code To Load Extension)
Once the extension is installed, you need to set the location in save and the file extension.
Location and extension is a personal preference.
settings.jsonfile in VS Code. Can be found in settings.
Add the following JSON code to enable your save location and extensions and save the changes.
- At the bottom of VS Code, a
Watch Sassbutton will show. Click on it to compile your sass to css.
After the button is clicked, the extension will recompile the scss to css on every save.
Pretty much every valid css is valid sass. If you type a valid css in a sass file without any other sass features, it will recompile it to the same valid css without any changes
Features of Sass
- Control Flow Statements like @if, @each and @for
- Nesting & Interpolation
- Modules & Partials
- Mixins & Functions
- Operators and Operations