Sass for Visual Studio 2010

// January 21st, 2011 // .Net, cool tool, Pet projects, Visual Studio.Net

The other day my buddy Nathan was telling me about how he was using Sass on his new project and I was intrigued by the idea. Using variables, nesting etc. in CSS? Sounded weird at first. But then I was thinking “yeah. why don’t we have all that already?”.

So I started reading up on it and I quickly realized that this is big. I don’t know if you guys have heard of it already. But I was surprised I didn’t know about it until now. Apparently, this has been out there for a while.

Anyways, here’s what the website has to say about Sass.

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rulesvariables,mixinsselector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Anyways, long story short, I saw what Sass could do and was impressed. So I wrote a Visual Studio Add-in that compiles scss code into css for you. After you install the add-in, you’ll be able to right click on a project and click on a menu item (“Convert SCSS to CSS”) that will scan every scss file in the project and create respective css files for each of those (in the same folder) and also continuously “watch” the scss files for changes, meaning, as soon as you save a change to an scss file, it’ll immediately update the corresponding css file.

Sound good? Ok, let’s get started.

1. Install Ruby (Windows)

Go to RubyInstaller.org and install the latest version of Ruby (if you don’t already have it). I downloaded the Ruby 1.9.2-p136 package.

Make sure you check “Add Ruby executables to your path” (as shown below) during the installation.

2. Install HAML

If you don’t know what Haml is, don’ t worry. All you need to know is that Sass is bundled with Haml, which means you need to get Haml to get Sass. And that’s what we’ll do next.

Close all command prompts if you have any open. Open a new command prompt window and run the following command.

gem install haml

If things went ok, here’s what it should look like.


3. Install Sass for Visual Studio Add-in

Now it’s time to install Sass for Visual Studio Add-in. Here are setup files – Download

Just do the regular setup. Should be straight forward.

4. Create a test web application

Let’s test the add-in now. Close all instances of Visual Studio 2010. Open a new instance and create an empty web application.

I renamed the project to Test. But it doesn’t make any difference what you name it. I just didn’t want you guys to be confused by the following screenshots in which the project says “Test”.

5. Add new folder called styles and create a new stylesheet in it

Again, name of the CSS file doesn’t matter because we are about to rename it.

6. Rename the stylesheet and add sample code to the file

Change it from stylesheet1.css to base.scss. Note the extra *s* in the file extension. S stands for Sassy (not kidding).

Now add the following code to the file. (Also note that this is not plain css. Look at the nesting.)

#navbar {
width: 80%;
height: 20px;

ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}

7. Time to put the add-in to work

Right click on the project and click “Convert SCSS to CSS”

8. Click Show All files in Solution Explorer top bar

9. Verify that a new file called base.css has been created

A new file named base.css should have been created. Include that file in the project and open it to make sure it has the following code.

#navbar {
width: 80%;
height: 30px; }
#navbar ul {
list-style-type: none; }
#navbar li {
float: left; }
#navbar li a {
font-weight: bold; }

The above code is regular css that was rendered from the code in base.scss by the ruby script.

11. Instant updates to css

Make a change to base.scss and watch base.css get updated instantly (No need to click on the add-in menu item again). The red arrows in the image below point to the change made in the scss file and the pop up tells you that base.css got updated.

12. Don’t like it? Uninstall

Do it the old-school way. Go to Control Panel > Programs > Uninstall a program and remove it from there.

Restart Visual Studio.

Open a solution and right click on a project. If the menu item is still there, click on  it and Visual Studio will prompt you to remove it.

16. This is Alpha version.

So please forgive any bugs. And if you really care, send me a tweet @appoosa for quicker response or leave your feedback in the comments below.

UPDATE:: I’ve opened up this project to the open-source community. You can find it here – https://github.com/appoosa/Sass-For-Visual-Studio

SECOND UPDATE::Based on the comments below and email feedback, it looks like SASS is a separate install now. So after Step 2 above, run the following command.

gem install sass

And then proceed with Step 3 and continue the process as mentioned above.

No related posts.

25 Responses to “Sass for Visual Studio 2010”

  1. Stephen says:

    It doesnt seem to work :(, nothing is happining. Ive created a new project, added new folder called styles, added css and renamed it to .scss, added your css snippet which you gave and finally i converted SCSS to CSS and nothing happened.

    I have Show all files on and also refreshed the folders but still nothing seemed to happen

  2. girish says:

    Did you get the Ruby install to work correctly? Do you see it running in your task manager?

  3. girish says:

    @Stephen Did you get the Ruby install to work correctly? Do you see it running in your task manager?

  4. Kevin says:

    You should include syntax highlighting for this to be usable:
    http://andrewblogs.com/blog/css-syntax-highlighting-for-scss/

  5. Kevin says:

    The link in my previous comment apparently only highlights regular CSS so while it looks nice at first it’s essentially useless.

  6. Matthew says:

    Absolutely fantastic. Thank you very much!

  7. andrej says:

    great stuff. Thanks alot! A real life saver :)

    Just fyi: I had some trouble writing and navigation in the scss file. After restarting vs2010, it worked however.

  8. Zane Yao says:

    Great~ If it could highlight syntax and build website project ,it would be wonderful~~

  9. kimzzi says:

    Nice one. Didn’t work at first, until I realized the steps didn’t include installation of sass itself. After installing sass (gem install sass) everything worked out fine :)

  10. Jeremy says:

    It would be awesome if you could package this into a nuget package.

  11. girish says:

    Good idea.

  12. kimzzi says:

    Hi,

    I used this add-in and it worked fine. Now my system is 64-bit and I want to use the add-in again but the add-in fails to load or causes an unknown exception when I open visual studio.

    Greetings,
    Kimzzi

  13. Jeremy McLeod says:

    Are you still working on this? If you are, any updates? If not, could you open-source the project on codeplex or github or any public repository site?

  14. girish says:

    Sorry for the delayed reply. I just noticed this comment was pending approval.

    To answer your question, yes – this is on github.

    https://github.com/appoosa/Sass-For-Visual-Studio

  15. Does this work for VS 2008??

  16. girish says:

    I don’t have VS 2008. So, I didn’t really test it on that. I’d be curious to see if it worked out of the box.

  17. skrile says:

    Wonder whether you are still planning on putting this up on github. The installer isn’t working on my corporate machine that has Add-ins on a network drive. I get the error: “Could not access the network location \\\\Visual Studio 2010\Addins

    That double slash after the network path is suspicious, but of course I can’t change your installer.

  18. Matt Dean says:

    This doesnt seem to work on Windows 7 x64, no smiley face on right click of project. Ruby and HAML both installed. Tried the link from here for the addin and also from Github.

    Is this a known issue?

  19. girish says:

    @skrile You can if you’d like to. The source is on GitHub – https://github.com/appoosa/Sass-For-Visual-Studio

  20. girish says:

    @Matt Dean I have it running on my machine which is Win 7 – 64 bit. Interestingly, people have reported issues with the plugin not working due to HAML being a separate gem, etc (which was an easy fix). But this is the first time, I’m seeing an issue with even the icon not showing up. You have 2 options. You can get the source from here and build it locally and deploy it to see if that fixes the problem – https://github.com/appoosa/Sass-For-Visual-Studio. Or you can try http://www.mindscapehq.com/products/web-workbench. It’s much more advanced and well supported than my little add-on. Hope that helps.

  21. Matt Dean says:

    Uninstalled Ruby, which I guess disposes of HAML, uninstalled your addin. Reinstalled them in order and Voila it works. Only difference was I downloaded your msi from http://sassforvisualstudio.com/ rather than github or http://giri.sh/2011/01/21/sass-for-visual-studio-2010/comment-page-1/#comment-12722. Dont know whether that made a difference. I assume github release is more up to date, can we just install over the top if this is the case.? Many thanks Matt

  22. Matt Dean says:

    One last question it would appear that this only runs on a new project and not a new website. Is this the case and if so is it possible to make it work on File > New Website ?

  23. girish says:

    @Matt Dean The service that runs in the background just scans for changes made to .scss files and then updates the corresponding CSS file in the same folder. It shouldn’t matter whether it’s a Website project or a Web application project. Are you able to consistently reproduce it?

  24. Matt Dean says:

    Yes that one is reproducable every time, unless I am missing a point. In its purest form: -

    1. If I go to File > New Project (let it create the project structure) then Right Click on eg. WebAplication1, we get the smiley face.

    2.If I go to File > New Website (let it create the structure) then Right Click on eg. C:\…\Website1 We, we get NO smiley face.

    Both the examples above are using ASP.NET Empty Website as the Template.

    This happens on my main box W7 x64 and on a brand new vitualbox W7 x86.

    If I proceed to make the base scss file as per your example it doesnt make the your icon appear in the context menu.

  25. girish says:

    @Matt Dean I looked through the code and was reminded of the fact that I enable the option on the context menu *only* if it’s a web project. So you’re right. It won’t work for Web site type projects. I’m sorry :(

Leave a Reply

Powered by WP Hashcash