How To Use SASS In Visual Studio Using Web Essentials

SASS stands for Syntactically Awesome Style-Sheets, and Web Essentials extends Visual Studio with a lot of new features that web developers have been missing for many years. If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS, then you will find many useful features that make your life, as a developer, easier.

This article is for all web developers who are using Visual Studio.

Please download VS 2012/2013/2015 or add the extension in Visual Studio.

Please follow the below steps.

1. Go to Tools -> Extensions and Updates...
   
   
   
   
2. Click on "Online" tab and then search "Web Essentials".
   
   
   
   
3. Select "Download" option.
   
   
   
   
4. Restart your Visual Studio.

Table of Content

1. SASS - Introduction
2. Variables
3. Rules
4. Mixins

SASS - Introduction

SASS stands for Syntactically Awesome Style-sheets and was created by Hampton Catlin.

SASS introduces new concepts like Importing, Rules, Variables, Mixins, Functions and Nesting into the CSS code. These concepts ultimately make your CSS awesome, easier to write, and more dynamic. All of these features combined, speed up any designer’s or developer’s workflow.

How to add new (.scss) file in Visual Studio

1. Visual Studio 2013 provides the ability to add SASS files (.scss).
2. Add a new .scss file to your project, e.g. dummystyles.scss.
3. Update style dummystyles.scss, save, and it will auto generate a dummystyles.css file under the .scss file.
4. You can, then, bundle or link it like a regular .css file.

How to compile .sass files in Visual Studio 2015

Install Web Compiler for (.scss) to (.css).

1. In Visual Studio, press Tools -> Extensions and updates.
2. Search for "Web Compiler" and install.
   
   
   
   
3. Restart of Visual Studio will be needed.

Compile files

1. Right-click the .scss - file in Solution Explorer to setup compilation.
2. Press Web Compiler -> Compile File (Shift+Alt+Q).

A file called compilerconfig.json is created in the root of the project where you can modify the behavior of the compiler. Right-clicking the compilerconfig.json file lets you easily run all the configured compilers.

Any time a .scssfile is modified within Visual Studio, the compiler runs automatically to produces the compiled output file.

Variables

A Variable is a name given to the memory location where the actual data is stored. Think of variables as a way to store information that you want to reuse throughout your stylesheet.



The actual output after compilation.



Rules

Set rules on CSS using @media. Also we can deliver specific sets of styles to different devices. Here, the background-color of the body depends on the conditions of the @media rule. SASS supports all CSS @-rules and it adds extra features to some.



The actual Output after compilation is the following.



It also supports a few SASS specific directives that aren’t available in CSS.

Mixins

Here is how the mixin works.

Mixins always compile to CSS rules where they appear in code. Where an @extend generates more selectors, @mixin always generates more rules.



Actual Output



Code needs to be simple and that is what SASS helps in achieving.

Cheers !!!