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.

Ruby Install Wizard for SASS on Windows

First step of Ruby installer for Windows.

Accept the terms and click Next.

2. Secondly, you will see a few options that we will just ignore for now. Ruby for Windows Install Options
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

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.

Gem Install SASS on Windows with Ruby

Command to install SASS

You will see some details about the install like the image below.Gem SASS Installing on Windows

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.Starting with a SASS SCSS File
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.SASS Watch Command to Compile
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.Confirm SASS Color Variable Worked

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.

Tagged with: , , , , ,
Posted in Web Dev
  • Pingback: Top 15 LESS And SASS Tutorials Around The Web. - Pillaticos

  • http://twitter.com/Pillaticos1 Pillaticos

    i have installed everything correctly, problems begin at point five, i use notepad so how do i view my work on that sass.

    • http://zqp.me/ Brad

      If you look at the screenshot of section 5 and 6 you can see everything that I have open.  In 5 SASS isn’t yet set to listen for changes and actually create the CSS file for you.

      Here is the command that you have to type into the CMD window.

      sass –watch main.scss:main.css

      That is what actually tells SASS to start working.

      Hope this helps

  • Akshay

    While installing sass from cmd ( ‘gem install sass’) , its showing the errror – ‘Could not find a valid gem ‘sass’=0> in any repository’ and ‘While executing gem … (Gem::RemoteFetcher::FetchError).
    What could be the problem ?? I have installed the Ruby Windows Installer.

    • http://zqp.me/ Brad

      Instead of just opening a cmd prompt did you do the

      Start

      Go to All Programs
      Click Ruby 1.9.3 (version # can vary)
      Click Start Command Prompt With Ruby