Sass for Visual Studio 2010
// January 21st, 2011 // 17 Comments » // .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 rules, variables,mixins, selector 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.
