Many times if I look at css stylesheets of middle and big systems it just makes me cry. Total chaos, code repetition, basically too much css. That’s why css preprocessors were invented. In the .NET world the most popular right now is Less. However, for a long time there is another player on the market - Sass. And that is what this post will be about - Sass along with asp.net (no matter mvc or not). If anyone doesn’t know what Sass is, check it out. In a nutshell it is CSS preprocessor giving you much more power to create your stylesheets (nesting, mixing, variables, etc.). Blablabla… anyway in many comparisons to less, sass is the winner, but you will choose whichever you like more. There are some posts over the Internet describing how to use Sass with asp.net, but I want to show you how I’m using it and what I am avoiding.
Simple list what do we need to start playing around Sass:
- Sass preprocessor engine
- VS syntax highlight
- something for debugging in the browser
What I am using:
- Compass which using Sass as a preprocessor. You need to install ruby envoirement and then simple using your favorite console shell
gem install compass
- For syntax highlighting I am using Web Essentials - I highly recommend this extension. Sass support is a new feature there and soon will be much better.
- For development, debugging - Chrome development tools (for firefox users - FireSass)
Ok. So what I am avoiding:
- Mindscape Web Workbench. Why??
- It’s too heavy
- “Go Pro” everywhere. I’m sick of it. Want to comment a line in your .scss file using VS’s shortcut - “commenting is only in pro version” - WTF? Are you kidding me?
- It using compass so.. do not rely on some commercial tools, when it is soo simple to use what they are using.
- That’s it
I recommend installing stuff I am using, but if you do not want install ruby and compass manually and you are “console hater” you can start with Web Workbench (it is using compass so ruby will be installed anyway).
Let’s rock - basic app
You have everything set up, so let’s play. We don’t want to build solution from scratch that’s why we will use twitter bootstrap nuget package.
- Create new empty MVC 4 project.
- Install packages.
That’s it. Fire up application and see what we got so far.
Now our application is using standard css stylesheets. Our goal is to replace them with a Sass files.
I found out a nice port from Less to Sass bootstrap. Nice job guys! Sure we gonna use it.
If you have git, simple clone the repo, if you don’t… install git :]. Fine, if you don’t, just download zipped repo.
- Delete all css files in Content folder.
- Create Content\Sass\Twitter directory and copy there all files from lib directory of cloned sass twitter port.
Initialize compass project. Open console in root folder of web application.
compass initThat will set up default compass project configuration. We need to change it a little bit. So now:
- Delete sass and stylesheet folder created in root path.
- Edit config.rb file
- Add application.scss file to Content/sass directory
So we are using one of compass built-in stylesheet (reset), main twitter bootstrap and reponsive stylesheet.
Let’s compile ours stylesheets
Now in Content directory we have all needed stylesheets.
Update application layouts to use application.css from Content directory.
add only application.css
Run application to check out if everything is working as it should.
Before you start doing anything using Sass I recommend get familiar with its features - Sass tutorial. After that we can play around.
I changed “sing-up” page.
Move inline style from _BootstrapLayout.empty.cshtml layout into application.scss
Now change it a little bit using sass features (I’m using variables from twitter bootstrap here) and import twitter bootstrap and compass default reset stylesheet.
It will change a little design, but… so what. In this little example I show you usage of variables, mixins and nestings.
I don’t want to create sass tutorial here, just do what you want, experiment.
There is something that everyone hates in every code generating languages like coffeescript, typescript, less and sass - troubles with debugging. Browser shows you some errors in specific line of code which have nothing to do with your original development files.
You can find some solutions to this problem.
For chrome browser (24+) there is for now an experiment sass support feature. Obtain how to use it - http://benfrain.com/add-sass-compass-debug-info-for-chrome-web-developer-tools/
For firefox you have FireSass extension. You will find instructions on how to use it on http://nex-3.com/posts/92-firesass-bridges-the-gap-between-sass-and-firebug
This solutions requires adding two config lines to config.rb file
Sass compiling improvements
At the end some tips how to improve stylesheet generation.
Just type in the console
And now everytime if you change something in your sass files, the compass will notice this and your stylesheets will be recompiled.
You can also execute
compass compile after your project compilation adding this to the end of the project file