What is SCSS?
SCSS is a more advanced CSS. With SCSS you can make variables and shorten your code. This won’t have any impact on the front end of your website but it will make styling your site a lot easier. So lets start the SCSS setup!
Requirements
- Visual Studio Code
- Live Sass Compiler (Add-on for Visual Studio Code)
The SCSS Setup
After you have downloaded Visual Studio Code you must make sure you have the addon activated. Once that is done create folder and make sure the following files are in it:
- style.scss
- index.html
Connecting html & scss
- In the <head> of the html file make sure you link the stylesheet “style.css”
You might think why link it to a CSS file when we only have a SCSS file but that will become clear later on. - Open your SCSS file.
- At the bar in the bottom of Visual Studio code click on the Watch Sass button.
Now the editor will create a style.css file for you in the same folder as the SCSS file. Because you activated watch sass the CSS file will now copy the SCSS data.
Why do we need to copy SCSS to CSS?
Webbrowsers can’t read SCSS. With the watch option everything you put in SCSS will be converted to normal CSS. Every time you are going to edit the SCSS file you must make sure that you have watch on. If you turn watch on and already have a CSS file it will just use that CSS file instead. And every time you save your SCSS file with watch on it will automatically update you CSS file
