In this tutorial we will show you the solution of how to use SCSS in HTML, SCSS stands for Sassy Cascading Style Sheet and is a superset of CSS (cascading style sheet).
It is a more advanced extension of CSS, developed by Chris Eppstein and Natalie Weizenbaum and designed by Hampton Catlin.
Step By Step Guide On How To Use SCSS In HTML :-
A browser cannot read a SCSS file. Hence something is required to make it readable for the browser. This is where a SCSS compiler comes to the picture.
The SCSS compiler compiles the SCSS file into a CSS file so that the browser can read it like it’s an usual CSS file. Now we will show you step-by-step on how it’s done.
<!DOCTYPE html> <html lang="en"> <head> <title>How To Use SCSS In HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <p id="para">Have Fun At Talkerscode!</p> </body> </html>
Below is the content of style.scss file
#para {
background-color: blue;
color: white;
text-align: center;
}
- For this tutorial we will be using Visual Studio Code.
- Firstly we create a .html file and write <!DOCTYPE html> at the top of the file. This is to inform the browser about the version of HTML we are using.
- Secondly, we use the lang attribute of HTML to specify the language of the file content. Here en stands for English.
- Next comes the <head> tag which includes information about the content of the HTML file. The <title> tag comes as a part of this information which shows the title of the HTML file on the browser tab.
- Now we are using a <link> tag inside the <head> tag to include an external CSS file. You might have a question that we are to include .scss file, then why are we writing .css file inside href attribute? Your question is valid and we are coming to this in a bit.
- Then begins the <body> tag to hold the body content of the HTML file.
- We write a short line with the help of a <p> tag. This <p> tag is given the id=para to help us easily reference it. This is also the line we are going to style using CSS.
- Now in the same directory as the HTML file, we will create a new file called style.scss and write the styling code as shown in the next segment of code. The styling applied would be to change the background colour, text colour and text alignment properties of the paragraph denoted by <p> tag.
- Let us note at this point that the <html>, <head>, <title>, <body> and <p> tags are all paired or container tags, i.e they have respective ending tags as </html>, </head>, </title>, </body> and </p>. The <link> tag however is an unpaired or singular tag and doesn’t have any ending tag.
- We will now run this HTML file.
- You found something strange right? Even though we applied styling to the <p> tag, no styling seems to be applied. Okay, You may say that we had style.scss file and we wrote style.css file in the href attribute of <link> tag, so it wouldn’t run. You’re aabsolutely right! Let’s close the browser and get back to our HTML file.
- Now we will press Ctrl+Shift+X and install Live Sass Compiler by Ritwick Dey from the Extensions Library.
- After it installs, we will go to the bottom panel of Visual Studio Code and click on Watch Sass. This will become Watching.. now.
- Now we will run the HTML file once again and open the browser. Voila! All our stylings have been applied now! Isn’t this awesome?
- Now You may be thinking that last time the href value was style.css and we added styling code in style.scss and that’s why it didn’t execute correctly. However this time also, they are different. How is it running correctly? Your question is spot on correct this time too!
- Internally the Live Sass Compiler is compiling the style.css file into a style.css file which the browser can understand. You can also see in the directory of your HTML file that two CSS files have been created (style.css and style.css.map). Our HTML file is reading this newly created style.css (out of Live Sass Compilation) in the href attribute of the <link> tag and due to this now we are able to see the styling in action.
- Just remember to click on “Watch Sass” everytime you use scss files to add styling. After You’re done with the work, You have to just click on Watching.. to get back to default state.
Conclusion :-
I hope this tutorial on how to use SCSS in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
