How To Setup Live SASS Compiler in VS Code

While developing a website, SASS offers us incredible features that are not available in CSS. However, since browsers only understand CSS, we need to compile SASS to CSS.

The Live Sass Compiler extension in VS Code makes it easy to automatically generate CSS from SASS. In this article, we'll explore what the Live Sass Compiler is, how it works, and how to configure its settings in visual studio code.

How to Install Live Sass Compiler In Vs Code?

Before you start, make sure you have VS code installed on your machine. If you don't have it installed, you can download it from the official website, and install it on your computer.

To set up the Live Sass Compiler in Visual Studio Code, open the Extensions view on the left side of the window, search for "Live Sass Compiler," and install it. After installation, reload the window for the changes to take effect, as this is a good practice in VS code.

How To Use Live Sass Compiler In Vs Code?

After installing Live Sass Compiler, you can start using it by following these steps:

• Create SASS or SCSS Files: Create a file with the extension .scss or .sass to write your SASS codes in your directory.
• Start Live Compilation: Once you've written your SASS code, find "Watch Sass" button in the bottom-right corner of the window. Click on it to start the live compilation process. The compiled CSS files will be generated in your directory.

How To Configure Compiler Settings?

The Live Sass Compiler comes with default configuration settings. To change these settings, open the project folder where you have your Sass files and by clicking on the Extensions icon in the Activity Bar on the side of the window. Look for the "Live Sass Compiler" extension and click on the "Extension Settings" (gear) icon.

.To modify settings click the edit in settings.json button.

Here are some of the most commonly used settings you can find in settings.json file.

Change File Format and Output Path

This setting allows you to specify the output CSS format and path CSS files will be saved. In this case, CSS files will be saved in CSS folder in our directory.

"liveSassCompile.settings.formats": [
   {
       "format": "expanded",
       "extensionName": ".css",
       "savePath": "/css"
   }
]

Set Autoprefix

Set this option to true if you want to enable Autoprefixer integration. This will add vendor prefixes automatically to your CSS properties.

Prefixes are used to ensure that CSS features work consistently across different web browsers, as different browsers may require different prefixes for certain CSS properties.

In this context, the compiler is configured to automatically add vendor prefixes to the compiled CSS code, ensuring better cross-browser compatibility for styles.

"liveSassCompile.settings.autoprefix": true

Exclude Files and Folders

If you want to exclude certain files or folders from being compiled, you can specify them in this setting. In the following code snippet, we exclude node_modules and vendor folders from being compiled.

"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    "**/vendor/**"
]

Generate Source Map

This option controls whether source maps should be generated along with the compiled CSS. Set it to true to enable source maps.json

"liveSassCompile.settings.generateMap": true

When you genarate CSS files, the resulting CSS can be challenging to read and debug because it lacks the structure and comments of the original code. Source maps help bridge this gap by providing a mapping between the original and compiled code.

Show Output Window

If set to true, the output window will display the compilation status and any errors or warnings.

"liveSassCompile.settings.showOutputWindow": true

After making the desired changes to the settings, save the settings file (settings.json) to apply the modifications. Now that you have configured the settings, open your Sass file and click on the "Watch Sass" button in the bottom-right corner of the window to start the live compilation process with the new settings.

Conclusion

In conclusion, Live Sass Compiler is a powerful extension for Visual Studio Code that significantly improves the Sass-based CSS development workflow. It provides automatic compiling and some settings to modify the behaviour of the compiler.

Thank you for reading.