Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

sass
css
html
communitycreator

How to use SASS in your HTML code

Theodore Kelechukwu Onyejiaku

SASS stands for Syntactically Awesome Style Sheets. It is mainly compiled to ordinary CSSCascade Style Sheets in your code.

SASS allows you to do more with CSS, such as:

  • create variables
  • mixins
  • nest CSS
  • create loops
  • reuse CSS rules

How to use SASS in your HTML

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.

Step 1

Install the Live Sass Compiler extension in the browser’s extension bar.

Here is a link to the Live Sass Compiler extension.

Step 2

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.

  • HTML

Step 3

Create a .scss file at the same root level as your index.html file and name it index.scss. This is our SASS file.

Step 4

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.

Step 5

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".

Step 6

Now, to start the compiler, click “Run”. This will compile the SASS code to CSS.

RELATED TAGS

sass
css
html
communitycreator

CONTRIBUTOR

Theodore Kelechukwu Onyejiaku
RELATED COURSES

View all Courses

Keep Exploring