1Installing Sass

So before you can explore the simplicity (and beauty) of Sass, you’ll need to set a few things up. It’s useful to have a folder where you keep all your Sass files for a project. Creating a Sass file couldn’t be easier: just use the extension scss—or sass for an Original Sass file.

The only tool you need is a text editor. Every OS comes with something, but of course that’s not always the best something. Generally, just use whatever you usually use to write CSS. We recommend some text editors with each set of installation instructions.

In order to install and run Sass, you need to have Ruby installed on your system. We’ll go through how to do this in the three major OS categories. If you’re not comfortable with the command line, you may want to check out Task 4, Avoiding the Command Line: Using Scout.

Installation on Windows

Because Windows doesn’t come with Ruby, you’ll need to install it. There are a few installers around the Internet, but we prefer the simple one at RubyInstaller.[4]

Once Ruby has been installed, you need to access the command line. Go to Start, then Accessories, then find Command Prompt. That should open a window that will allow you to run the needed install commands. A decent text editor for Windows is Notepad++.

Installation on a Mac

Unlike Windows, Ruby is already installed on OS X, making things a bit easier. All we need to do is open the Terminal application and install Sass via the command line. The text editor that we use on our Macs is TextMate.

Installation for Linux

If you’re a Linux user, you’ll be aware of how to access your command line—we won’t insult your Unix-fu. To install Ruby (and Ruby gems), use your package manager. We recommend Ruby version 1.9.2. As for text editors, Vim tends to be the most popular.

What To Do...
  • Use this command to install Sass.
     
    gem install sass
  • Create a simple Sass file.

    Name a file test.scss with the following contents:

     
    .red {
     
    color: red;
     
    }
  • Test that Sass is working.

    Navigate to the folder containing the test.scss file via the command line and you should see the following if you run the command sass test.scss.

     
    $> sass test.scss
     
    .red {
     
    color: red; }

    It just reformatted the CSS we wrote above. Now we’re ready to show you how to rock some Sass superpowers.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset