Hello Sunil
How to setup and use SASS in VS Code

How to setup and use SASS in VS Code (Dart SASS support + Live page preview)

SASS stands for “Syntactically Awesome Style Sheets” and it is an extension to CSS which helps us write more flexible styles – in other words, it’s a CSS preprocessor.

CSS are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. SASS lets you use features that don’t exist in CSS yet like nesting, mixins, inheritance and others.

Note: How does SASS Work?

A browser does not understand SASS code. Therefore, you will need a SASS preprocessor to convert SASS code into standard CSS.

This process is called transpiling. So, you need to give a transpiler some SASS code and then get some CSS code back.

In other words, SASS helps us organize large stylesheets in a more maintainable way. In this article, you will learn to set up development environment for SASS in Visual Studio Code.

How to setup SASS dev environment in VS Code

Now follow the step by step methods to get started with SASS inside VS Code:

Step 1: Download Visual Studio Code (VS Code) and install it on your system.

Setup SASS in VS Code - Download VS code

Step 2: Open VS Code and then click on extensions tab.

Setup SASS in VS Code - click on extensions tab

Step 3: Search for DartJS Sass Compiler and Sass Watcher by CodeLios and install it.

Setup SASS in VS Code - DartJS Sass Compiler and Sass Watcher from vs marketplace

This extension will do magic part of SASS in your project which is compatible with latest Dart SASS.

Step 4: Then install Live Server from VS Code Marketplace.

Setup SASS in VS Code - Install Live Server

This extension allows browser to auto reload.

Step 5: Create a directory named “SASS-DEV” in VS Code.

Setup SASS in VS Code - Create SASS-Dev folder for your project

Step 6: In root directory create “index.html” file and then add the following html code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="sass/style.css">
	<title>SASS Demo</title>
</head>
<body>
	<h1>Hello, <span>World!</span></h1>
	<p>I am a Web Developer from <span>India</span>.</p>	
</body>
</html>

The current directory structure and html code will look something as illustrated:

Setup SASS in VS Code - html code

Step 7: Next create a directory called “sass” in your root project directory. Then, under “sass” directory create another file called “style.scss”.

Setup SASS in VS Code - style.scss file under sass folder

.scss or .sass?

In SASS there are two ways of writing – .scss and .sass – however after being compiled they generate similar output.

.scss is the modern standard. It’s syntax is very similar to CSS in that it uses brackets and semi-colons. Even normal CSS is valid in this syntax.

.sass is an older syntax that focuses on indentation to separate code blocks and newline characters to separate rules.

Step 8: Now let’s jump straight to write some code in “style.scss”.

$text-color: #86A3C3;
$span-color: #7268A7;

span {
	color: $span-color;
}
h1, p {
	color: $text-color;
}

Then save the file by pressing CTRL + S which will automatically generate “style.css”, “style.css.map”, “style.min.css” and “style.min.css.map” for you.

Setup SASS in VS Code - save style.scss file

While writing down code, you only need to write code in “style.scss” and it auto generate plain css for you in “style.css” file.

Note: Never add code in your css file else it will erase automatically by SASS compiler.

Step 9: After all setup click on “Go Live” from VS code status bar which will fired up Chrome browser to open the Live server with IP address and port. You can start building your project along with the all the assets. Any file changes such as “index.html” will automatically reload on your open browser.

Setup SASS in VS Code - click on go live

Here is how the output looks on Google Chrome browser:

Setup SASS in VS Code - scss output pain css - output on google chrome browser

If using an extension from VS Code marketplace is bit overwhelming, you can roll the preprocessor into your workflow by using a simple GUI on your development machine and compile as you go.

Several applications are available for SASS but the best two applications we recommend are as follows:

Prepros: This tool compiles SASS with automatic CSS prefixing and includes a built-in server for cross-browser testing. All its features are available with its free unlimited trial and bonus it runs on Mac, Windows, and Linux.

Koala: This GUI application is also cross-platform and offers real-time compilation. Koala runs on Mac, Windows, and Linux.

Conclusion:

We hope you have found this article helpful, and that it has provided useful information to set up a dev environment for SASS in VS code.

The point is start utilizing the power of SASS in whatever way you are comfortable with, it will be worth the learning curve to have this powerful tool.

Thanks for reading this article and if you have any questions or comments, then leave them below.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Sunil Pradhan

Developer, Explorer, Learner. My hunger and curiosity drive me forward in directions I want to go.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Developer, Explorer, Learner. My hunger and curiosity drive me forward in directions I want to go.