{SASS: Tutorials}

Lesson 2: Setup (Windows)

Now that you understand what SASS is, we can begin with the next step and install it onto your machine. This lesson will be based on a Windows 8 machine, because that just so happens to be what I’m running but it should be the same for all Windows operating systems. Also, stay tuned if you’re a Linux or OSX user, there will be a lesson for you shortly.

Step 1: Install Ruby

SASS is actually built using Ruby programming library, so it’s required to run and helpfully there is a Ruby installer already available to us. So first things first, we need to download ‘RubyInstaller for Windows’ from their download page, Ruby 1.9.3-p286 is the most current installer at the time of writing this.

Run this executable and follow the install through as you would normally, with the only recommended tick box being ‘Add Ruby executables to your PATH’ – which will automatically associate this Ruby install as your default.

Step 2: Install SASS

Once you have Ruby installed we can now install SASS. To do this, open the Command Prompt (cmd) by pressing the Windows key and typing ‘cmd’ and hitting enter (excuse me if you already know how to do this). When you have the command prompt open type:

gem install sass

Step 3: Run a Watch

Yey! You now have both Ruby and SASS fully installed. Now we just want to set SASS to ‘watch’ a file of ours. By watching a file it will convert any SASS code into CSS each time we save the file. If you’re working on a website in a folder you’ll want to navigate to it using the cd command.

To setup a watch we use the sass command as follows:

sass --watch <YOUR_SASS_FILE>:<YOUR_CSS_FILE>

Example:

sass --watch style.scss:style.css

Step 4: Hello World!

Now it’s all setup, lets give it a go. In your style.scss file add a simple snippet as an example:

$firstVariable: #333;

body {
    background-color: $firstVariable;

    .container {
        border: 2px solid 
            lighten($firstVariable, 50%);
    }

}

CSS Output:

body {
  background-color: #333333; }
  body .container {
    border: 2px solid #b3b3b3; }

If your CSS file changed without you changing it, then it’s working and you should see something like the output above. We’ll talk more about what actually happened in later lessons.

Stay tuned for further lessons!

Leave a Reply

Get in Touch



[Coming Soon]

...in the mean time, talk to me on twitter, @eddturtle.