Getting Started With SASS on Windows

If you have yet to start using a CSS preprocessor then now might be the time to take a look. CSS preprocessors are a great way to add a little bit of logic and code reusability to CSS. CSS preprocessors, like SASS and LESS, will give you things like variables, mixins, and operations. These are all things that are common in most programming languanges but have not been implemented into CSS. As the name suggests a CSS preprocessor will process your code before hand, turning it into valid, usable, and often compressed CSS files.

SASS Installation For Windows

1. First, you will need to go here to get the Ruby installer. You can reference this site for information, documentation, and tutorials on SASS. After downloading the Ruby installer you will run it and see this.

Accept the terms and click Next.

2. Secondly, you will see a few options that we will just ignore for now.
Simply click Install and click Finish when the next window pops up.

3. Next is where I had to do some searching to figure out exactly what to do next, and is the main reason for me writing this blog. Hopefully, with this blog anyone will be able to follow along and get running with SASS without having to do any extra searching.

• Click the Start Menu (or press the Windows key)
• Go to All Programs
• Click Ruby 1.9.3 (version # can vary)
• Click Start Command Prompt With Ruby

4. Now, you should have a command prompt window open. In that window type ‘gem install sass’ and hit Enter.

You will see some details about the install like the image below.

5. Now you can actually start using SASS. I started by creating a folder called start-with-sass and inside that folder I have an index.html that references main.css. You can see below that there is no main.css yet so it won’t work but you will see how make SASS create and update your main.css. I have also created my main.scss as you can see.
You will notice in the SCSS file I have defined a variable $coolColor:#BADA55; and that variable is used to define the color of the h1 tags.

6. Next, we need to tell our SCSS files where to compile. We either need to know the full path to our SCSS files or we need to get into the directory of the SCSS files. I prefer to just go into the file so the commands are shorter. In the command prompt you use the cd command to enter a directory, like so: cd /path/to/your/files . NOTE: the dir command lists the files/folders in the current directory. We want the main.scss file to compile to main.css as we link to in the head of our html. To do this we have to type a command into the command prompt. The command is ‘sass –watch main.scss:main.css’. Obviously you can name your files whatever you wish. As soon as you do this you should see main.css appear in your folder if you have an explorer window opened there.
Below, you can confirm that the $coolColor variable that we made did in fact work. You are now all ready to start using SASS to handle your stylesheets. You have to keep the command prompt open with the watch command going because it is basically watching for main.scss to be changed and as soon as it is change main.css is updated.

Conclusion

SASS and other CSS preprocessors make css management much easier and more powerful. Within a few minutes it is easy to be up and running with SASS which will give you things like mixins, variables, and functions inside your css. When I get time I will write a little bit more about the features of SASS but for now you can just checkout the tutorials on their site.