DEV Community

Cover image for Day 13 - SASS Guide
Mark Carungay
Mark Carungay

Posted on • Updated on

Day 13 - SASS Guide

Why use SASS over CSS?
Sass (which stands for 'Syntactically awesome style sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organized and allows you to create style sheets faster. Sass is compatible with all versions of CSS.

Step 1:
Download Live Sass Compiler on VSCode extension.
Step 2:
You can modify sass settings by going to vscode settings>search live sass>edit from json file. You can change directory using this code "liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "./css"
}]

Step 3:
Click watch Sass.

Tip: You can create a partial file using underscore then the name of file ex. "_config" and import it to your scss with syntax "@import "config" (no need to add underscore).

Discussion (0)