Visual Studio 2015 & Sass  – Clean styling of Polymer elements

Just a few years ago, or even less, if some one would have said “I’m working with a Google framework and a lot of open source plugins – in Visual Studio“, the instant reply would probably have been slightly Pythonesque, like -“He’s a witch, burn him!!!”. But what once might have been considered an unholy trifecta is now not only doable, but it’s even enjoyable.

The last few days I have been thinking about how to set up the styling of my Polymer elements in an easy way that would help me keep the CSS dry, preferably by use of variables, linked files and mixins. At the same time the tooling had to produce my desired file/folder structure and be usable from VS2015. The solution also had to be generic enough, install and setup once with no need for changes when adding new elements and stylesheets.

What I came up with was Sass run with Grunt, and here is the steps needed to set it up in Visual Studio.

Install Ruby and Sass

First off, to be able to run Sass you need to install Ruby, as Sass is a Ruby gem.

The easiest way to install Ruby and Sass is to use Chocolatey (if you aren’t running Chocolatey yet you must check it out, just follow the link). When you have Chocolatey installed, just type the following two lines in your command window to install SASS and Ruby

choco install ruby

and

choco install sass

However, when installing Sass I got an error saying:

ERROR: Could not find a valid gem 'sass' (= 3.2.10), here is why:
 Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)

A workaround to this is to add the unsecured source for rubygems, enter the following in PowerShell

gem sources -a http://rubygems.org

This is a hack so don’t use this as a constant solution! But after this, installing Sass with Chocolatey worked fine.

Then remove the unsecured source after you installed Sass by executing the following

gem sources -r http://rubygems.org

Install Grunt-Contrib-Sass in VS2015

Now it’s time to set up the tooling in Visual Studio.

1. Add “grunt-contrib-sass” to package.json, right click the NPM folder under Dependencies and choose “Restore Packages”. Expand thumbnail for visual description.

2. Configure Grunt by editing the gruntfile.js.

2.1 Enable Sass by adding this line of Javascript at the end of the file

grunt.loadNpmTasks('grunt-contrib-sass');

2.2 Enter the Sass task configuration you want to use, for example

 sass: {
            default: {
                files: [{
                    expand: true,
                    src: ['wwwroot/components/*/*.scss'],
                    dest: '<%= src %>',
                    ext: '.css',
                }]
            }
        }

This is all the setup needed in Visual Studio 2015 to enable you to run Sass from the Task Runner Explorer.

Path error – “You need to have Ruby and Sass installed and in your PATH for this task to work”

To be able to use the Sass task from VS2015, it needs Sass and Ruby not only to be installed but to be on the PATH as well. If you haven’t got Sass and Ruby on your path you will get this error message

Running "sass:default" (sass) task
Process terminated with code 6.
Warning:
You need to have Ruby and Sass installed and in your PATH for this task to work.
More info: https://github.com/gruntjs/grunt-contrib-sass
 Use --force to continue.

Aborted due to warnings.

You can check what’s on your path from PowerShell by typing

$env:path

Adding Ruby to your path from PowerShell permanently can be done with this PowerShell command

[Environment]::SetEnvironmentVariable("Path", $env:Path + ";C:\ruby215\bin", "Machine")

In my case “C:\ruby215” is where Ruby was installed, this needs to be changed if your path is different!

Making sure Ruby and Sass are in the machines PATH

Use the following two commands in PowerShell to make sure that Ruby and Sass now are reachable from your path

ruby -v

sass -v

Both lines should report the current installed version, if everything is setup correctly.

Trying to run the task again

Trying to re-run the Sass task from Visual Studio now will result in the same problem as before, it’s telling us that Ruby and Sass needs to be on the path. But that’s because it’s keeping the state of the path since it was loaded, so just restart VS2015 and it will pick up the new path. Running the task after restart will now result in a successful run, given everything is setup properly.

A few words about the Sass config and presumed folder structure

The folder and file structure I’m using looks like something below

wwwroot
|- components
   |- my-element
   |   |- my-element.html
   |   |- my-element.scss
   |- another-element
   |   |- another-element.html
   |   |- another-element.scss
   |- styling
   |   |- _includes.scss
   |   |- _variables.scss
   |   |- misc-styling.html

What I wanted was to:

1. Traverse my component tree
2. Get all relevant linked scss files
3. Output each compiled CSS file in to the respective components folder

Dissecting the Sass task configuration

The task configuration I used was:

 sass: {
            default: {
                files: [{
                    expand: true,
                    src: ['wwwroot/components/*/*.scss'],
                    dest: '<%= src %>',
                    ext: '.css',
                }]
            }
        }

The detailed explanation of the options

• expand: true – needed to enable a dynamic file object
• src: [‘wwwroot/components/*/*.scss’] – look for all sources that matches this pattern
• dest: ‘<%= src %>’ – dynamically sets the destination path using a template, this will output the css file under the same directory as the source file
• ext: ‘.css’ – replaces existing file endings on generated destination paths (in our case switching .scss to .css)

For more information about how to setup grunt tasks with dynamic file objects – see the documentation for Grunt.

Happy coding! 🙂