How to use SCSS style in HTML?

Unfortunately, you can’t directly insert an SCSS (Sassy CSS) file into your HTML. That’s because SASS is a preprocessor of CSS3's syntax, which is not supported by web browsers. While SCSS offers many handy features for developers that do not exist in native CSS such as inheritance, nesting, logic statements, mixins, and more, it also limits you from having a link to the .scss file in your HTML page.

So to take full advantage of all the incredible features offered by SCSS in your HTML page, you’ll first have to compile it down to CSS.

In html file insert the .css files which was generated by the .scss file with the help of third party tool like koala, Scott and by the command prompt by sass watch query.

Follow these steps to insert an SCSS file into HTML:-

First, After installation of ruby and gem install sass with the help of command prompt.

Second, Create a folder inside the folder create

Index.html

main.scss

main.css

Add main.css link inside the index.html file which will give converted scss classes into it.

Run the folder in command prompt or in koala.

In cmd use -

  • Select the folder directory and folder
  • Run the given code in it

sass - -watch main.scss:main.css (enter)

All the available scss classes will be converted into main.css files and apply in the html design.

Once your SCSS is converted to CSS, you can easily insert the newly converted CSS file into your HTML code with the following line of code:

<link rel="stylesheet" type="text/css" href="file.css">

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *