How to Install SASS on VsCode
In this post, I take you through how to install SASS on VsCode. SASS which stands for Syntactically Awesome Style Sheets is a CSS preprocessor that gives your CSS superpowers. SASS comes in to help due to how larger, and more complex of maintaining Stylesheets have become. It is an extension of CSS and a CSS pre-processor. It is completely compatible with all versions of CSS even as it helps reduces the repetition of CSS and therefore saves time. Designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006 and it is free to download and use by anyone who needs it. You may also be interested in learning how to install HTML Web Client for Microsoft RDS. If you have used or intend to use the Burp Suite security tool for your application, see how to install and use Burp Suite for Web Application Security Testing
Variables, nested rules, mixins, imports, inheritance, built-in functions, and other features not available in CSS are supported by Sass. Sass has a compiler that allows us to create stylesheets in two formats: indented and SCSS. The indented is the older, indented syntax that eliminates the curly brackets and semi-colons. It has a file extension as .sass.Whilst the SCSS is the newer and most widely used syntax. It is basically a subset of CSS3 syntax. This means that you can create standard CSS with some extra features. Deploying code to and from GitHub is what a developer does almost everyday, learn how to Deploy Code from GitHub to Azure App Service from the Command-line
How Does SASS Work?
Sass code is not understood by browsers. As a result, you’ll need a Sass pre-processor to turn Sass code into regular CSS. This is known as transpiring. So you need to give some Sass code to a transpiler (some kind of computer) and then get some CSS code back.
Please see how to build your first CI/CD Pipeline in Azure DevOps using ASP.Net Core Application, How to enable or disable automatic Live Caption on macOS through Chrome, and how to Disable Developer Tools in Microsoft Edge using Registry or Group Policy in Windows.
Installing SASS on VsCode
To install SASS on Vscode, follow the steps below. Here are some exciting articles: How to disable the Microsoft Deployment Toolkit Task Sequence property sheet, and more on Linux Directory Hierarchy.
Step 1. Install node and npm
Sass is dependent on the node and Node Package Manager to run on VsCode. To install node and npm, navigate to your VsCode terminal and run the command below:
npm init
Step 2. Install SASS from your command line using the below command
npm install -g sass
Step 3. Install Sass VsCode Extension called Live SASS Compiler. This extension watches your SCSS files and converts them to regular CSS each time you save. Two ways to do this, you can download and install it from the Visual Studio marketplace or search for the extension directly within your VsCode IDE.
Here I will install it from the VsCode. To do so locate the extension icon on your VsCode and search for Live SASS Compiler and click to install it.
After the installation, it will show that Live SASS Compiler has been installed and you’re good to go.
Setting up your files
We created a simple index.html file and inserted the HTML Boilerplate and use it for this demonstration.
Note the index.html file must created inside the same folder that npm files is set up. 
To further experiment with Sass, we added some text for unordered and ordered listings to the body.
Create a file called styles.scss. When you save a .scss file, a pink logo appears on the side of the file in your explorer window, indicating that it is a SASS file.
Click to watch the VSCode
Now that the index.html and styles.scss files have been created, click the ‘watch sass’ button on the bottom right of your VSCode screen to start watching.
You will notice that the compiler will automatically create two additional files in your directory. styles.css and styles.css.map.
The following step is to link your CSS to your HTML. The styles.css file is the only one you need to worry about and link for this stage. But before then we have added some files to the style.scss file and
Remember the style.css and style.css.map files were automatically created when we click on ‘watch sass’. Here, we only added code to style.scss and the Live SASS Compiler helps us to map the style.scss to the style.css for browsers to recognize it as a normal CSS file.
When opening the index.html file on a web browser, you will see that the CSS has been applied.
You can manually make sass to recompile the CSS file in case of any changes by running the below command on your terminal:
sass --watch style.scss:style.cssEach time to run the above command, the Live SASS compiler checks for changes in your SASS files and updates your CSS. It’s that easy to use SASS for your project!
I hope you found this blog post helpful. Please let me know in the comment section if you have any questions.
