Using Compass and Sass for CSS in your Next Project
Sass could potentially be called CSS 2.0; it has some really nifty features that allow you to write your code in less time and with more flexibility. In today’s article, we will be working the basics!
What is Sass?
Sass is simply a different way to work with CSS. It allows you to keep your CSS code very simple and helps increase readability. It takes something like this:
And turns it into:
You can check out Sass at http://sass-lang.com/
What is Compass?
Compass makes working with Sass even easier. The author, Chris Eppstein, has also included some converted frameworks such as Blueprint, YUI, and 960.gs. It also easily integrates with Ruby based projects, but is just as easy to add to any other project. Compass is open-source and is extremely well documented. Check out the source and documentation.
Installation
Both Sass (which is part of the Haml Project) and Compass are installed through RubyGems. If you dont have any clue what I am talking about, check out "Step 1 – Installing Ruby on Rails" of my previous article Ruby on Rails for Designers, and follow the steps down until you hit the section named "Installing Rails".
To install both of these gems, we can just run a single command:
(sudo) gem install haml chriseppstein-compass
As long as it says that it successfully installed both gems, you are good to go!
Project Setup
If you are working with a Ruby-based project then check out the documentation as it will explain how to get it working with your specific framework, but I’ll assume we are working with a simple HTML or the like project.
The compass command has a lot of options, and if you run compass –help, you might see:
FYI: The next to top line that says "Loading haml-edge gem." is because I use the latest version, so you don’t need to worry about it if yours says something different.
Now we are going to start our Compass project. To create run the following command (including the trailing period, that tells compass where we want to make our project!)
compass --sass-dir=sass .
And you should see:
Where initializing, Compass would normally default to having the Sass in a folder name src, but I wanted to change that so I added the option. If you look at the folder, you should see a file named config.rb and two other folders.
The config.rb is the configuration that Compass looks at, but most of the time you wont need to mess with this. Also, like the output from the creation command says, we have three ways of updating our CSS from our Sass:
compass – using this option, you would have to be in the correct directory, and then Compass would compile your Sass once.compass -u path/to/project – this is about the same as the command as above, but you do not have to be in the project directory, and rather pass in it with the command.compass --watch [path/to/project] – this command is pretty awesome in that it watches for any changes to your Sass files and will automatically recompile them whenever a change is detected.Now that you know how to setup a project, I’ll explain some of the "rules" of working with Sass
Sass Syntax
Normally when writing CSS, you would write something like:
#header {width: 900px; background:#111;}
#header a {color:#000; text-decoration:none;}
One of the problems with that is that you are repeating the same name many times. Lets make this into Sass. I am going to be working in the screen.sass file, so delete everything and your Sass would like:
#header
:width 900px
:background #111
a
:color #000
:text-decoration none
Personally, that it much easier to read and write this way, no curly braces or semicolons. The way that Sass understand the nesting is through indentation.
The first selector is not indented at all so the final CSS with start with that. Also, all properties, (so color, height width, etc) begin with a colon. So for the properties for #header they are indented. It does not matter if you use tabs or spaces, but you must remain consistent, otherwise you will see an error (which I’ll show in just a minute).
So now that you have your properties, we have our next selector. Since this is indented to the same as the properties, the CSS output will be #header a ...
Now that we are this far, lets try compiling: (in your project directory)
compass
And voila!
Let’s say that you didn’t indent everything the same, Compass would error:
Now, once you know CSS, Sass wont be very much of a learning curve, as the main difference when getting started is the different formatting rules. Next, we will get working with some of the more advanced (but cooler!) parts of Sass.
Features of Sass
Variables
One awesome feature of Sass is it’s ability to use variables. An example:
!link_color = #fff
#header
:width 900px
:background #111
a
:color = !link_color
:text-decoration none
Compiling this, would give you:
Math
You may be laughing at this title, but its true, you can do math in Sass! For this demonstration, we will be using Sass’s interactive mode, so run:
sass -i
And a little messing around would give you:
Or a more visual approach:
#111 – #999 = #000
#111 + #999 = #aaa
#398191 + #111 = #4a92a2
#398191 – #111 = #287080
Apart from addition and subtraction, you can also multiply and divide:
#398191 / 2 = #1c4048
#398191 * 2 = #72ffff
To exit the Sass interactive mode, keypress Control-C, and then type "end", and press enter.
Mixins
If you have ever heard of keeping your code DRY, DRY means "don't repeat yourself." Mixins allow you to do just that. For example, with the gaining popularity of rounded corners, you may want to create a mixin to handle that, so somewhere, (not under a selector) you would add:
=rounded :border-radius 4px :-moz-border-radius 4px :-webkit-border-radius 4px
And to use, you would do something like:
#header :width 900px :background #111 +rounded
And when compiled:
Lets say though, you may want the border radius to be variable – well you can have a mixin expect to be passed some values. Changing our mixin, it would look like:
=rounded(!radius = 4px) :border-radius = !radius :-moz-border-radius = !radius :-webkit-border-radius = !radius
And then to use you could use what we did before, and then the value would default to 4px, otherwise:
#header :width 900px :background #111 +rounded(8px)
Importing
Sass also has the ability to import other Sass files, so lets say you wanted to import a file (in the same as this sass file), you would add:
@import reset.sass
This feature is really nice in giving you the ability the keep extraneous styles outside your main file. For example, you could also keep a mixins sass file that you copied around projects and then a simple import would add that code it – no copy and paste.
Conclusion
I hope you understand the basics of using Sass and Compass and will possibly use it in your next project! Now, if you are like I was when I found Sass, and said "I don’t need this!", give it a try. I’ve switched over to it for all of my recent projects and I really enjoy working with it.
Links
Here are a few links that may help you along the way:
- The Sass Reference contains what I talked about today and much much more. Definitely worth a look if you are serious about Sass.
- The TextMate bundle for Sass is great and I use it often.
- The official screencast for Compass, while long, covers about every base with Compass and Sass.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
definitely gonna try this! is awesome!! thanks
Never heard of this.. Thanks for your input!
me too, will give it a try..
Hm this looks very very awesome!
Just to dont get it wrong:
- I write CSS in SASS syntax
- I compile it
- The compiler returns normal CSS
- I can´t use the SASS syntax finally ( even not with a server side compiler or something )
Right?
Right, but but you can setup some kind of auto deployment that will automatically compile SASS for you.
Precompiling your sass is optional for Ruby on Rails and Merb. If you don’t, Sass will generate CSS once when it serves the first request.
You can run “compass -w” in the command-line and have it automatically compile, yes.
I think you mixed up your example images for describing SASS. You might wanna swap the two!
Yeah the first two images are swapped, I was confused for a little bit wondering what the hell SASS actually did.
Absolutely. I couldn’t make head or tail of what the author was on about until I skimmed through the article because of it…
How to use this on window
Install a virtual machine with Ubuntu (Linux) on windows or use a Mac in my opinion is the best option.
I like the idea of being able to use math in CSS, but couldn’t that break some selector names?
you don’t use Math in CSS, you use Math in SASS, which it’s a ruby language.
interesting, but I can’t say that this is a real improvement over css. Interesting article and I love to read about new technologies!
and the add to accomplish auto completion and repetition I would use php or another type of prepared programming language.
Give it a try before you judge too hastily. Convert a stylesheet or two by hand, just to check it out, then see what you think.
Never used this. Definitely i will try it.
you can do math in Sass! :)
Is this really useful?
Thanks for your ping
Hm ok, thats not so nice as i thought.
When i write CSS code i always drop some lines and then look at the browser if everything is correct.
Now i have to Save the .css -> compile it -> look at the browser.
This compiling step is hardcore annoying during the development process.
If you run “compass –watch”, you don’t have to do anything except save the sass file and reload your browser. If you’re working on a ruby based project, it can be configured so that you don’t even have to run the compass command to recompile your sass files.
Yeah, I don’t really get what the benefit is either. Seems like a hassle for not much added readability.
Good to know that there are options out there though.
I agree.
you run compass in the background and it generates the compiled css in realtime.
I’ve been using compass for a while now and there is no way i can go back. SASS and HTML are much more isomorphic in structure. I find i can create css a LOT easier.
Its more readable and you repeat yourself less
ditto. pass.
With Compass you can use the command:
compass –watch [path/to/project]
So it will compile automatically every time you save the sass file.
You can instruct the compiler to “watch” for file changes and automatically compile it. So your workflow would hardly change.
This looks great, going to use it for my next project.
So whats the benefit of using this?
Seems like it would be easier and faster to just write it normally.
“Sass could potentially be called CSS 2.0″
huhwhat?
Yeah, I also thought there was something “else” called CSS 2.0
nice….I will definitely use this…although I wish it had a simpler installation…I don’t work in ruby at all and therefore ill have to download ruby to run this….I have read about saas before, left it untouched for the same reason…too much setup…but ill definitely use it this time….
Ruby is not hard to install and once it is installed, compass is trivial to install. It looks like a bigger requirement than it is. Plus there’s lots of great ruby software that you’ll be able to use once you have ruby installed.
Don’t see the benefit of using this. Also, CSS 2.0 already exists :B
I think the author meant that sass is akin to a next generation of stylesheet syntax.
The benefit is in using simple abstractions to design your web pages that apply battle-tested styles that work in every major browser or degrade gracefully.
Also, Sass enables you to make your stylesheets more maintainable by making changes simpler to enact via the principle of DRY.
I also dont see the benefit of using this
Looks very cool. CSS can get complex very quickly, this looks like a good way to improve organization.
Which TextMate theme are you using? I want it!
‘CSS can get complex very quickly’
Only when done wrong?
i use sass and compass (with haml) in my rails projects. just love it!
thanks for the tut though!!! amazing choice!
This is a neat “Look what I can do” thing I guess, but honestly it seems convoluted and unnecessary. CSS isn’t very hard as it is nor does it take long to write. Learning a new “framework(?)” or whatever this is seems like a real time killer in itself. Also, why would I want to install something just to use CSS in a different way? ALSO, this would make migrating a site or bringing on a new developer a headache I think. I don’t know, maybe I’m just being contrary.
Compass was built from real world experience and extracted from real world projects. It is not a technology demonstration. The users who use it every day can attest to what a big difference it makes to their productivity.
New developers pick it up the basics within a couple hours and can be great at it within a week or so — but then again, I hire wicked smart developers and I wrote the project, so my experience might not be typical.
You’re right to be wary new technology, but compass has been around for over a year now, has thousands of passionate users, and is growing by the week. I think it has reached the point where it warrants you at least giving it a try with an open mind.
Robbie and others, I’ve been designing websites and web applications for years now, and compass/sass has been the single most revolutionary thing in my working life… I can’t say enough good things about it. I used to be a print designer with absolutely no technical background at all, and I made the effort to learn this and it paid off within a week.
Huh, glad I’m not the only one who doesn’t get it. Skimming through the tutorial, I was really confused as to where I’d be saving time or increasing workflow…
So let me get this straight…
1. Code all your css in sass because you can drop a few names here and there.
2. Compile sass.
3. Get exactly what you’d have anyway with the added bonus of additional server resources.
4. ????
5. Profit?
I’m going to stick to my method of just writing nice, clear and understandable css as I go along.
The commentors who don’t see the use in something like SASS probably have not worked on large web projects before.
In an agile team, with lots of rapid changes, the quality of CSS code quickly degrades. Tools like SASS make CSS easier to maintain.
I haven’t used SASS yet, but I likely will use it (or something similar) on new, large projects.
I work on large scale web projects, and I can’t see the benefit of this.
Without trying to be rude, you’re extolling it’s virtues, but also saying you’ve never used it, so perhaps you shouldn’t assume that people who don’t see the benefits are inexperienced.
This really does seem pretty pointless.
Agreed
Lol its called good CSS developers and GIT/SVN.
I was waiting for a tutorial on this
I haven’t worked with SASS nor Compass yet, the few web projects I have worked on were too small and didn’t require a tool like this.
However, I will play with it to see how it behaves…
Thanks!
Seems interesting. I like the ability to add variables into the css. That would come in handy on larger projects when a client decided to change something. Don’t need to find all the instances, yet if you organize your stylesheet, you wouldn’t need to do much searching. To me, the benifits of SASS do not out way the drawbacks, i.e. having to compile to preview in browser. Yet maybe for others, they do.
Awesome guide.
Discovered Compass a few months back but never go it working. Now I am all set up :)
Thanks.
CSS for Ruby snobs.
I’ll stick with the regular syntax, thank you
I think LESS is much better than SASS.
I don’t really see the big difference between writing css the old way or writing it with SASS, there is a few shortcuts in SASS but if you have to compile it before you can use it, i don’t really see what you gain from using SASS….
#header {
margin: 0 50px 0 0;
border: 1px solid #ccc;
}
or
#header
:margin 0 50px 0 0
:border 1px solid #ccc
i choose the good old way :)
The normal css seems easier to me. I don’t like it’s syntax.
Please, do not forget of the new born alternative: lessCSS. Inspired in Sass from the author of http://www.usabilitypost.com/ – http://lesscss.org/
What TextMate theme is this?
One word: Variables
Has anyone used CSScaffold ?
It seems a bit more transparent then SASS and seems to offer some of the same features.
I don’t like it. Seems like too much hassle and the effects are not even that great. It would be better if it could be done through something like PHP or JS. But I wouldn’t want to install something on my server.
Hey guys – thanks for the comments. Yes some people may not want to use this, and while it may seem weird to use for a small project, I really like working with it. Kyle is defiantly correct with the size of the project: It helps a lot when working on huge projects.
And Ben, nothing is installed on your server. You compile it locally. I normally run compass –watch and it feels like I was still using CSS, just that I am happier.
Hope you enjoyed the article!
i dont know why i should use/learn sass if i can work faster with normal css ?
If you try working with sass properly youll realise you cant work faster with normal css.
Wish you would give us some ports in your article though, I don’t like having to install ruby to use this, as nice as it is.
1st, is this really for Ruby? how about PHP/ASP.Net user?
2nd, how much this solution viable to css? after all their were only different way to write CSS, what we should know was how to write effective and efficient CSS codes (including IE hacks)
3rd, didn’t this mean we reintroduce a new language just to do the same old thing before? And how about learning curve for all new web designer?
4th, my personal opinion was this is not revolutionary enough compared to JS framework like JQuery or prototype
Think the editors missed a few hits with this really. Whilst it looks useful by the end, the start should have been rewritten to show off why it’s useful immediately, rather than just reading like ‘wow, look, an alternate but essentially identical way of writing css’. Not to mention it should have been CSS 4.0 rather than 2.0. ;)
Good tutorial otherwise though.
I am with the others who say CSS is fine the way it is. The only case where I might not have a standard CSS file would be if I was dynamically generating it through PHP. I just don’t need anything else.
I like Ruby, I do like PHP as well, but lets be honest, let’s keep things on it’s right place. css is for layout and design, so, compile css sounds weird… install a gem? and for the guys who aren’t used to RoR? and well, if a designer start to work on 2 or 3 projects at same time? will they need to install passenger? Sounds a good idea, but Im not sure if would work for “agile” development. Don’t know, Actually, I didn’t try it myself… maybe I would change my idea
It’s a nice insight but there’s been quite a few alternative CSS shorthand techniques but I have no problem writing it quickly and these methods just seem to try and fix something that doesn’t need fixing.
Until we have something that does what jQuery does for JavaScript, then I’m not too bothered.
variables should definitely be supported in css…. this is an interesting workaround….
I’ll be honest – I didn’t read this article, since I came to a very quick conclusion about how useful it would be.
Really wish there were an answer to obtaining variables from within “real” css – which is about the only real advantage I see in sass. The disadvantages seem daunting even when you forget the extremely user-unfriendly installation process. Does this mean that you make a change in your css then have to re-compile before you then can reload and see the change in your test browser?
Well, nice written tutorial anyway.
At first this sounded somewhat promising, until I saw Ruby and the console was involved. It quickly got far too complicated and complex and doesn’t seem to improve efficiency or productivity at all. This seems like something hardcore programmers would be into, only because it involves Ruby and ’2.0′.
I can’t see myself using this. Once most people learn CSS and become adept with it, they could style an entire site before they could finish reading this article.
There is no advantage to this as far as I can see with the exception of what you call “mixins”.
Why would I want to learn a different syntax to do the very same thing, but include a compile step in the middle? It will take longer to create the same things. Not only that, but you will have to teach new developers in your company or team how to use Sass.
I agree with others, show us something that does for CSS what JQuery does for Javascript and i’ll be impressed.
Also, the size of a project is irrelevant. If you don’t agree, please explain in detail why it is. How can a big project benefit from this OVER normal CSS?
Why don’t you write your CSS that way in the first place? After working with CSS for a few years I ended up structuring my css code in way very similar to this Sas output.
If you let people rely on tools like these they will never learn how to write lean manageable CSS code by hand.
If you have big projects, make sure you employ good front-end developers. Unfortunately this doesn’t happen very often and therefore some ‘god-complex’ programmer came up with a total useless program designed to help the ‘designers’ write more manageable code…
This is actually insulting.
This tutorial is a lot more complicated than it needs to be. I love using Compass+Sass because its very simple. CSS is way too verbose.
What…the…hell… I submitted an idea for this a couple weeks ago and was turned down! WHAT THE HELL.
Maybe they… beat you to it?