Visual Studio 2015 Front-end Tooling - LESS and SASS

In the first post of this series, I show my readers how to setup LESS or SASS in Visual Studio to make your CSS easier to maintain.

Visual Studio Front-End Tooling Series

• Introduction
• LESS and SASS
• Gulp and Grunt
• NPM and Bower

CSS has been around for a while (1996 me thinks) and most developers never saw the fascination with it.

Heck, I didn't see the benefit until I found the CSS Zen Garden.

That seriously changed my perspective of what CSS could do.

Since 2000, it's been one of the three major technologies to make a web page (the other two are HTML and JavaScript).

Now, 16 years later, Cascading Style Sheets (CSS) are required to build flexible layouts and advanced web designs (anyone remember table layouts?...ughhh).

Yet, CSS does have it's short-comings.

• It doesn't have variables
• Violates the DRY principle (Don't Repeat Yourself)
• Knowledge of diverse CSS-isms required for each browser (-webkit, -moz, -ms, etc.)
• Absence of calculations

This is why LESS and SASS were built...

...and probably why developers aren't too enthused with plain CSS. ;-)

What is LESS and SASS?

LESS and SASS (Syntactically Awesome Style Sheets) are both pre-processors meaning they extend the existing CSS language into something more maintainable and extendable.

For those familiar with TypeScript for JavaScript, it's similar to transpiling, but only for CSS.

As mentioned for this series, these are design-time tools to assist with your web development.

Setup

The easiest way to setup LESS or SASS in your project is to grab the awesome Web Compiler (GitHub) from Mads Kristensen.

Once you install the extension (may require a VS restart), you are ready to build to your CSS file.

For our demonstration purposes, we'll use SASS, but LESS is very similar in functionality.

I created a plain ASP.NET MVC project and renamed Site.css in the Content folder to Site.scss.

I replaced all of the CSS in the file with the following SASS-y CSS.

Site.scss

$font-stack:  Helvetica, sans-serif;
$menu-height: 21px;

/* Colors */
$primary-color: #333;
$link-color: #0085ff;
$visited-color: #8a00ff;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

ul.nav {
    margin-top: $menu-height / 2;
    height: $menu-height;
    background-color: #FFF;

    li {
        display: inline-block;

        a {
            :link {
                color: $link-color; 
            }
            :visited {
                color: $visited-color;
            }
        }
    }
}

Save your file and then right-click it and select Web Compiler -> Compile File.

When you compile the file, a number of things happen:

• Two new files appear under our Site.scss file: a site.css and a site.min.css file. These two files are the result of running the scss file through the pre-processor.
• Two files appear in the root: compilerconfig.json and compilerconfig.json.defaults. These files are meant for configuration purposes for your Task Runner (we'll touch on those later).

Let's see what our SASS pre-processor generated.

Site.css

/* Colors */
body {
  font: 100% Helvetica, sans-serif;
  color: #333; }

ul.nav {
  margin-top: 10.5px;
  height: 21px;
  background-color: #FFF; }
  ul.nav li {
    display: inline-block; }
    ul.nav li a :link {
      color: #0085ff; }
    ul.nav li a :visited {
      color: #8a00ff; }

Since we have our generated files, anytime we save anything in our Site.scss, the two new files will be generated every time.

Conclusion

In this post, I explained what SASS and LESS was, how to setup your Visual Studio to automatically pre-process the files into CSS, and included a sample SCSS to try and explore.

With Web Compiler, we can pre-process LESS, SASS, Stylus, JSX, ES6, and CoffeeScript files.

Did you find this addition to your web arsenal helpful? Please share your comments below or share this post with others.

Visual Studio Front-End Tooling Series

• Introduction
• LESS and SASS
• Gulp and Grunt
• NPM and Bower