Niels Dequeker

When I read what I write I learn what I think

Sass for Terminal Dummies

| Comments

A while ago, there were some posts on Forrst about LESS. LESS is a tool, made to add extra functionality to CSS. Until now I only wrote static CSS-files, sometimes with over 1500 lines of code for a simple website. To make the stylesheet more readable, I grouped codeblocks, used comments, added extra indent with tabs, etc.

Splitting up the stylesheet in separate files is also an option to keep everything structured, but that adds a lot of extra HTTP-request.

Recently, one of our teachers told us about Syntactically Awesome Stylesheets (Sass). It is more or less the same as LESS, the main difference is that LESS uses the CSS syntax and Sass uses its own syntax. But it’s possible to use CSS-syntax with SCSS.

I was (and still am) very excited about it, and I’d like to share both my experience and knowledge with the rest of the world.

What is Sass?

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

sass-lang.com

Compass

One of the disadvantages of pure CSS was that if you import other CSS-files, you create extra HTTP-requests. Compass is a framework that makes it possible to compile all your imported CSS-files into one CSS-file.

I think there is no reasen why you wouldn’t use Compass if you work with Sass.

Using Sass

To use Sass first create two new folders css and sass. In the same directory, create a file named config.rb. Add these lines to the file:

1
2
3

css_dir = "css"
sass_dir = "sass"
output_style = :compressed

The first line refers to the directory were your final CSS-file will be compiled to. The second line tells where your .scss-files are stored.

The last line tells the compiler to compress the final CSS-file, so you will save some bandwith (which is important for mobile-applications).

Now make a file named screen.scss in the directory sass/. Here you can write CSS-code like you did before.

Now we first have to install Sass and Compass. Type these two commands in the Terminal, to install both Ruby Gems.

1
2

$ sudo gem install haml
$ sudo gem install compass

To compile the file, we’ll use Terminal. Go to the folder sass we have just created. To change the current directory, type the command cd and then   the path you want to go to. E.g. cd /Applications/MAMP/htdocs/my-first-sass-project.

Next, we have to compile the screen.scss-file. We will compile the file using Compass. Use the commando compass compile sass/screen.scss to compile your scss-file.

Now look at your css-folder. There should be a file named screen.css, with your previously written CSS-code, compressed.

That’s it. If you don’t want to manually compile the .scss-file after you saved it, you can use the commando ‘watch’. Use compass watch sass/screen.scss to automatically compile your sass-file when you make some changes (and save the file).

Sass offers some great build-in functions for color manipulations, be sure to check it out if you want to learn more about it.

Sass functions

Variables
You can declare variables and use them everywhere in your .scss-file. This can come in handy when you wan to use the same colors over and over again for e.g. headings, links, menu…

Nesting
You can write much cleaner CSS-code with nesting.

1
2
3
4
5
6
7
8
9
10
11
12
13

ul.message {
  li.warning {
    color: yellow;
  }

  li.error {
    color: red;
  }

  li.success {
    color: green;
  }
}

Mixins
Mixins are like functions. You can pass some parameters and it gives you the result you want.

1
2
3
4
5
6
7
8
9
10
11
12

@makebox ($background, $border, $width) {
  background: $background;
  border: 1px solid $border;
  width: $width;
}
#boxA {
  @include makebox(#FF0000, #000000, 150);
}

#boxB {
  @include makebox(#00FF00, #CCCCCC, 375);
}

Inheritance
It is possible to extend selectors from other selectors.

1
2
3
4
5
6
7
8
9

.blue {
  background: #0000FF;
  border: 10px dashed #0000FF;
}

#box {
  @extend .blue;
  width: 160px;
}

If you like what you see, be sure to take a look at these resources to learn Sass. The most complicated part is installing / compiling the files. Most other things speak for themselves.

Further reference

Feel free to leave a comment with your thoughts on Sass. I hope you’ve enjoyed this one!

Comments