Add power of SASS to ASP.NET application

I always wanted to find a way to develop CSS in a way I write C# or JavaScript. The main problem in CSS as a language for me were complexity of refactoring and code reuse.

There were projects such SASS and LESS, but there was no way to adopt them into .NET/Visual Studio environment easily.

About month ago I met amazing product - Mindscape Web Workbench . It is a Visual Studio plug in, allows you to write SASS, LESS and Coffee Script with Visual Studio and therefore use power of those technologies in ASP.NET project.



I actually use only SASS. LESS is an alternative to SASS and Coffee Script is a "competitor" of TypeScript which I already use in my projects. I use free edition, and it is more then enough for me.

How it works for me:

1. First step after installing Mindscape Web Workbench - convert existing CSS files into SASS.

Since any CSS is compatible with SASS, the procedure is simple changing of extension of files from 'css' to 'scss'.

Renamed file will get nice purple icon, moreover, now it can be opened with SASS editor, supporting SASS syntax.

2. Second step - set up Web Workbench settings. Right click on project node in Solution Explorer and select 'Web Workbench Settings...' from menu. It will open settings page, where you can select which files will be compiled and where to place compiled output. 

Next time you save changes of *.scss file, it will be compiled and you will see produced output according to settings.

3. Start using SASS. You can immediately use SASS with existing code. SASS documentation is available here. For example, I extracted colors into variables and wrote mixin:

By all that I can really "program" my CSS using variables,  functions (mixins), scoping (nesting), etc.

Next Step - work with Compass framework:

There is a cool CSS framework based on SASS - Compass. I did not work with it yet, but they say you may easily get it into with Web Workbench. Right click on project node in Solution Explorer - you will fine "Setup Compass Project" menu. I did play with it, but it seems to be worthy to learn.