Friday, December 18, 2015

Using Zurb Foundation Sites with Sass in Visual Studio 2015

I'm currently involved in a project where we decided to use Zurb Foundation and since it's built with Sass we should be able to customise it to our needs.

Unfortunately we're stuck with Visual Studio 2015 and Asp.Net 4 + MVC 5 so we don't have the luxury of having NPM or Bower built in as in Asp.Net 5 + MVC 6. Yes, there are NuGet packages for Foundation but they're ancient.

This part of the process is not optimal but I downloaded the latest version of Foundation separately using the following NPM command:

npm install foundation-sites

I then took all the contents and added to my project.

Folder structure















To be able to compile Sass into Css right within Visual Studio we need to install the extension Web Compiler.

The next step was to create our main Sass file which I named site.scss. I put in a folder called SCSS. To have Web Compiler compile this, just right-click and choose Web Compiler -> Compile File.

Compile file


















In site.scss we can then just import Foundation Sites to include it in our compiled Css.

Include Foundation





Here comes one tricky part and that is to tell Web Compiler about the whereabouts of Foundation. This can be done in the configuration file compilerconfig.json.defaults that gets created in the root of your project when you choose to compile a file with Web Compiler.
Find the node under "sass" that's called "includePath" and give it a value of "./Static/Framework/Foundation-sites/scss".

Now you should be good to go and whenever site.scss gets saved a site.css including Foundation should be compiled.

For easier debugging using browser developer tools you could get Source Maps working by enabling Source Maps in compileconfig.json that is located within the root of your project.

Source map setting












Please note! While the last step enables Source maps in the compiled Css, the path to them is incorrect. This could be solved in the configuration file compileconfig.json.defaults.
Find the node under "sass" that's called "soruceMapRoot" (yes it's misspelled) and change it to "/".

1 comment:

Anonymous said...

Hi NJimmy

Some new Zurb Foundation items have started to appear in the extension section. They don't use Sass and are for ASP.NET WebForms but I have found them useful