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.
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.
To use Sass first create two new folders
sass. In the same directory, create a file named
config.rb. Add these lines to the file:
1 2 3
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.
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.
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.
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…
You can write much cleaner CSS-code with nesting.
1 2 3 4 5 6 7 8 9 10 11 12 13
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
It is possible to extend selectors from other selectors.
1 2 3 4 5 6 7 8 9
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.
Feel free to leave a comment with your thoughts on Sass. I hope you’ve enjoyed this one!