SASS stands for Syntactically Awesome Style Sheets. It is mainly compiled to ordinary
SASS allows you to do more with CSS, such as:
The following steps tell you how to run SASS in your Visual Studio Code editor. An example of how to style a <p>
: paragraph element is given later on.
Install the Live Sass Compiler
extension in the browser’s extension bar.
Here is a link to the Live Sass Compiler extension.
Create your HTML file and name it index.html
. Include the <p>
element that we want to style with SASS.
Please note that browsers do not recognize SASS, so a compiler needs to compile it to CSS.
Create a .scss
file at the same root level as your index.html
file and name it index.scss
. This is our SASS file.
Lastly, add the following code that will style your <p>
element.
$red-bg : red; p{ background-color: $red-bg; }
Based on the code above, we want to give our <p>
element a red background color.
Add the following to the <head>
tag of your HTML file.
<link rel="stylesheet" href="index.css">
The extension we installed will compile the SASS file index.scss
into CSS and store the compiled code in a new CSS file, also called index.css
. This is the reason for the code above, href = "index.css"
.
Now, to start the compiler, click “Run”. This will compile the SASS code to CSS.
RELATED TAGS
CONTRIBUTOR
View all Courses