A Review Of Compass For Sass

A Review Of Compass For Sass

Front enders be warned, its hard, but worth it

First, if Chris E., creator of Compass, wanders over and reads this, I apologize if I was harassing you with my questions. I’ll post them in the document support section from now on.

Compass does not feel like it is written for non-programmers (which is probably fine for most users and the creator). Why, you ask would that be ok? Because I don’t feel that was their intention. I’ve read that they want to make Sass/SCSS more accessible to people new to it, but if that is true, they is a lot of work. To use them, you need the command line. How many of you are familiar with that? If you are young and don’t remember DOS, it is intimidating. We are used to interfaces, right? I mean, look at the editors we use. The command line has NOTHING to look at. Literally. So besides trying to learn a cool…not sure what to actually call Compass or Sass…technology? You have to dive into using the command line. Forget Dreamweaver for editing your .scss file, won’t work (at least not the version I have CS4)…which doesn’t matter all that much to me since I am using NetBeans and Notepad++. My point is, actually USING these things is great. Getting there sucks.

The install process is a bitch. At least if you go the Ruby way, and I am not sure there is another way, considering it is a gem, but then you have to wrap your brains around that one, too. I know that this sounds discouraging, but I am here to tell you that ALL that crap…is worth it. Just be prepared for some serious learning and a lot of searching.

Its the little things that make me happy

Once you have everything set up and running Compass comes with some seriously awesome stuff. You know how annoying it is to type out all the vendor prefixes to the CSS3 properties we have come to love? Compass has mixins built in for that. You use the @import line at the top of your .scss file like so:

@import "compass/css3";

This includes most of the mixins you will need. If you haven’t kept up with me, a mixin is basically a chunk of written out css that you plug values into so you don’t have to keep repeating your styles. For instance, if you write this:

.myClass {
@include border-radius(10px);
}

The compiled CSS looks like this:

.myClass {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
}

Personally, I don’t write all of those out myself, but Compass makes sure your bases are covered. It also (one I learned that you need version 0.10.6.pre.1 for it to work) makes the @font-face easy to use. Here is what you would write (after the imports at the top of your file):

@include font-face("Miso", font-files("../fonts/miso-bold-webfont.ttf", truetype, "fonts/miso-bold-webfont.otf", opentype));
 
.myClass {
font-family: "Miso";
}

Of course that looks easy, but it took a while for me to get everything working. I couldn’t find it written anywhere that @font-face needs the 0.10.6.pre.1 version to work properly. I couldn’t find it in the document support either, which maybe because I am one of the few non-real coders looking for answers. Now that I have it all in place, this crap is awesome.

I am using Sass, why do I want to use Compass?

Compass does a bunch of things that were not so obvious until I thought about why I was bothering with it. Then it all became clear. Compass isn’t just a compiler. Here is some of what it can do for you:

  • Set up a project with all the correct folders and starting files you need
  • Can use Blueprint if you are into using a CSS grid system (which I have found that I am not!)
  • Yes, it will compile your Sass/SCSS into CSS – in different formats: nested, expanded, compact or compressed (meaning you like all 1 line, block or whatever…it will do it)
  • Modules for Mixins that will help with all the CSS3 crap you can imagine
  • A dedicated creator who will not call you an asshole and to stop bothering him

Do I have anything really bad to say about it?

No. Well…no. Bear with me while I explain. Web Designers and Front End Developers will struggle with it. If you are a designer with limited knowledge of how to build a site, or just the basics, you will either take a look at Sass and run away screaming mad like you failed at the Southern Oracle, or you will say why bother because CSS is so damn awesome. If you are a front end guy/woman, you might be intimidated by all that is involved just to get things going, much less using it, and talk yourself out of it because…well CSS is so damn awesome.

Sass and Compass are NOT fun to install, like I have said. It requires using the command line. You can get around it, trust me. Once you do a few things with it you will find yourself feeling like a bad ass, even though you aren’t doing anything all that impressive. The real issue is once you have Compass installed. Which of course is where I ran into some serious “WtF!”

The documentation seems to have everything you need, only…it doesn’t. And honestly, I don’t think that is the fault of the creator, because as I said above, I don’t believe this project was made for you…or me. It was written for them. By them I mean Ruby coders. They already know what the hell they are doing, and the documentation/support is probably quite awesome. But what if you are a complete newb to something like this, and you need to know how to upgrade to the next version, when you ALREADY did a gem update to make sure you have everything? It didn’t give you the latest version (guessing because it is not the latest stable release?). Now what? What do you type? Or you figured out that there is crap on github or whatever it’s called, that you can download, but you don’t know where to put it once you extract it. Where exactly do you put the @import lines for partials (think of partials as additional css files that you import into your main one)? I had to put two of mine after the mixins I created myself, otherwise the additional css in them wouldn’t include the partials. That isn’t written anywhere I could find.

I think you get what I am trying to point out. There is a higher learning curve than what I think the creator and Ruby people would say there is. I don’t feel the documentation is written for the person new to Sass and Compass, and the kinds of questions we would ask are not the kind you are going to find answered in the support docs. I believe if there was some discussion with new users and their troubles using it, the support would be improved a hundred fold. It really freakin’ needs a “for idiots” section.

With all of that said, I am telling you to take off your lazy mental cap, stop thinking CSS is the end all be all, and use Compass. Of course if you are using Compass, you are using Sass. But you should. It won’t take web development by storm and have everyone using it simply because it is a different way of thinking about your CSS. What I am saying though, is YOU should. Most of us developers are simply happy to do what we are doing. Stop that crap!

I wrote an article last month for OXP about getting ahead and NOT just keeping up with everyone else. If you agree with that, you need to take your CSS development to the next step. Sass and Compass will take you there. Sass takes a lot of repetitive writing out of CSS, and puts the real kick ass back into it. Compass makes Sass better by extension. If you are thinking of using Sass, you need to be using Compass. Both are 150% worth the frustration and hair pulling and a loudly screamed “F*#%!” at your monitor. Both will make you better at what you do.

Coupon Code: webmachine

Tags: ,

One Response to “A Review Of Compass For Sass”

  1. Debbie says:

    What an awesome article. I love the fact that you put it into words that I can relate too. Also, I enjoyed your OXP article about getting ahead and NOT just keeping up with everyone else. I appreciate the time you take to share your knowledge.

Leave a Reply