Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Visual Studio 2015 Front-End Tooling—Less and Sass

DZone's Guide to

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.

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

Visual Studio Front-End Tooling Series

CSS has been around for a while (1996 methinks) 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 its shortcomings.

  • 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 are 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 set up 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.

Renaming Site.css to Site.scss for SASS

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;


$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:


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, any time 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 were, how to set up 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.

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
css ,sass ,visual studio ,style sheets ,less

Published at DZone with permission of Jonathan Danylko, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}