Sass is a CSS preprocessor that adds special features such as variables, loops, and functions into regular CSS. Using SASS, you can write CSS. The goal is to make the coding process simpler and more organized. SASS has two versions: .sass and .scss. The main difference between these versions is the syntaxes. Once we have our .sass or .scss files created, we need to convert them into standard CSS.
This guide will show how to compile your SASS/SCSS to CSS in Visual Studio Code.
Step 1: Install Live Sass Compiler Extension In VS Code
- Select the Extensions tab from the sidebar.
Click on the Extensions tab from the sidebar. - Search for Live Sass Compiler in the search box.
Search for “Live Sass Compiler” from the search box. - Click on the Install button.
Click on the Install button.
Step 2: Open An Existing Project With VS Code
- From the “Explorers” tab in the sidebar, click on the Open Folder button.
Click on the Open Folder button from the Explorer tab. - Open the folder from your preferred directory.
Locate your project folder from the preferred directory. - Once the folder is opened, you’ll see all the source files.
Source or project files inside the folder. - As you can see from the above image, I have set up a simple HTML file to style it using SASS.
Step 3: Create A SASS/SCSS File
- Inside the “Explorer” panel, click on the New File button.
Click on the New File Button. - Enter any name and press Enter. Make sure to add .sass or .scss at the end of the filename.
Enter the filename with .scss or .sass extension. - Now, write the SASS code to style your HTML file. I am entering the following code:
.card { position: relative; background-color: red; .card__name { background-color: blueviolet; } - From the Status bar on the bottom of VS Code, click on the Watch Sass button.
Click on the Watch Sass button from the Status bar. - Finally, the extension will generate a .css and map.css file inside the project folder. The following image shows our output.
The output shows the styling we achieved using SASS.
As you may have noticed, the Live Sass Compiler extension compiles your SASS files in real-time. Also, choosing SASS over directly writing CSS removes many syntax requirements, like blocks and semicolons. It makes it easy to execute CSS.
