{SASS: Tutorials}

Lesson 2: Setup (Linux)

Leading on from the last lesson, which talked about what SASS is and its history, we’ll now setup up SASS on your own machine so you can get started with it – because it’s always more fun to write code than read ;). This lesson will be based on a Ubuntu 12.10 machine, but it should be compatible with most Linux distributions. If you’re not a Linux user then, check out the Windows lesson.

Step 1: Install Ruby

Because SASS is actually built upon the Ruby programming language it requires it to be installed – which is super easy in Linux, just crack open the terminal and type:

# Ubuntu / Mint / Debian
sudo apt-get install ruby

# Fedora
sudo yum install ruby

Installing Ruby

…or alternatively, use your favourite GUI package manager.

Step 2: Install SASS

Once you have Ruby installed we can now install SASS, which is once again simple. Keep the Terminal up and just type the command:

sudo gem install sass

Installing SASS on Ubuntu

Step 3: Run a Watch

Yey! You now have both Ruby and SASS installed and set up on your machine. We can now use SASS to ‘watch’ a file of ours. By watching a file, SASS will convert any SCSS code into CSS each time we save the file. As an example, keep the Terminal up and navigate to a folder of yours (using a ‘cd’ command) and run a watch, like so:

# Make sure style.scss exists (if not make it)
# with 'gedit style.scss' and save it.

# Watch style.scss
sass --watch style.scss:style.css

Watch

Step 4: Hello World!

Now that you’re all setup, we can begin a little code example (don’t worry if you don’t understand it).

SCSS

$firstVariable: #333;

body {
    background-color: $firstVariable;

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

}

Save this into your ‘style.scss’ file.

CSS Output

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

That’s all folks! Just about sums up how to install SASS onto a Linux machine. If you have anything to say, leave it in the comments below.

Leave a Reply

Get in Touch



[Coming Soon]

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