Scripts

How to Install SASS on VsCode

SASS-in-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
install-NPM
Installing NPM

Step 2. Install SASS from your command line using the below command

npm install -g sass
Installing-Sass
Installing Sass from the Command line

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.

installing-sass-Vscode-extension
Installing Live SASS Compiler Extension

After the installation, it will show that Live SASS Compiler has been installed and you’re good to go.

Sass-Compiler-installed
Live Sass Compiler Installed

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. 
insert-html-boilerplate
Creating the index.html file

To further experiment with Sass, we added some text for unordered and ordered listings to the body.

added-list-item-to-index-html-file
Adding text

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.

style-scss-file-created
CSS file created

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.

click-on-watch
Watch Sass

You will notice that the compiler will automatically create two additional files in your directory. styles.css and styles.css.map.

Two-files-created
Two additional files created

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.

Web-page-interface
CSS Applied to the index.html file

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.css

Each 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.

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x