How to set up SASS on VS Code

Photo by Desola Lanre-Ologun on Unsplash

SASS is a CSS preprocessor designed to enhance the convenience of styling. However, it needs to be converted to CSS for the browser to interpret it correctly. When working with SASS in VS Code, you must compile the code into pure CSS. This can be achieved in five straightforward steps.

Ensure that VS Code is open and your project folder (the one you want to work on) is also opened within VS Code.

1. Install the Live SASS Compiler Extension

• Click the extensions menu icon on the left-hand side of the activity bar.
• Search for “Live SASS Compiler” and select the one by Glenn Marks, which is the most up-to-date version.
• Click “Install” and wait for the extension to install completely.

When coding in SASS, the compiler transforms your code into CSS and typically places it in the same location as your SASS file. However, it’s advisable to have the compiled CSS in a separate “dist” (distribution) folder for better organization. This can be achieved by configuring the SASS extension settings.

By configuring the “Live SASS compiler” settings, you can specify the output directory for your compiled CSS. This ensures that your CSS files are neatly organized in a dedicated folder, such as “dist” rather than cluttering the source directory.

2. Configure the Extension

• Open the command palette by pressing “Ctrl+Shift+P” (or “Command+Shift+P” on Mac).
• Type “open settings” and select “Preferences: Open Settings (JSON)” from the drop-down menu.

• In the “settings.json” file that opens, scroll down to the end.
• Add a new line (ensure the last line ends with a comma), and type “livesass” in quotes.

• Select “liveSassCompile.settings.formats” from the autocomplete menu, which would generate a bunch of new code.
• Find the “SavePath” key in the newly generated code and delete the value, which is typically “null,” then type in “/dist” in quotes.

In some cases, compiled SASS code can become quite extensive, especially in larger projects. It is recommended to compress it to conserve space. To achieve this, follow these steps:

3. Compress the compiled SASS code (Optional)

• In the generated code, look for the “format” key and change the value from “expanded” to “compressed” in quotes.
• Make sure to save all changes (Ctrl+S) if auto-save is not enabled.

After you’ve followed these steps, close VS Code, and then reopen it to make sure all changes take effect.

Once reopened, create a new SSS file, and feel free to give it any name you prefer, for example “test.sass.” This action will kickstart the compiler. Subsequently, you’ll notice a “Watch Sass” button appear on the status bar located at the bottom of your screen.

In case the “Watch Sass” button still is not visible, simply right-click on the status bar. A menu will appear, showing the tools currently displayed on the status bar. Click on “Live Sass Compiler,” and a tick will appear next to it. Following this, the “Watch Sass” button will become visible on the status bar.

Live Server

The Live Server extension functions as a tool for generating a local server, enabling your project files to run in a web browser, just like a standard website. One of its standout features is its live reload capability, ensuring that any code modification you make is instantly reflected on the live page in real-time.

4. Install Live Server (If not installed)

• Click the extensions menu icon again and search for “Live Server” by Ritwick Dey.
• Click “Install” and then reload VS Code. A “Go Live” button will appear at the bottom right of your screen.

5. Compile Your SASS Files

• Click the “Watch Sass” button to initiate the compilation process.
• A terminal window will appear, and a “dist” folder containing the compiled CSS file will be generated.

When changes are made to your SASS, the compiler will promptly detect these modifications once you save them. The compiler will also identify and pinpoint any errors in your SASS code, displaying the line where the error resides in the terminal.

• Click the button again (it will display “watching” this time) to close the terminal when you’re done.

By following these steps, you can efficiently work with SASS in VS Code, compiling your code and viewing real-time updates using Live Server.