My Love For SCSS And Sass Grows

My Love For SCSS And Sass Grows

As does my stupidity

I’ve been continuing on with my site redesign, which means I continue to use Sass. I’m dead serious with the title of this post, too. Not just Sass, but Compass as well. Sass would be good by itself, but the stuff that Compass puts in, especially it’s CSS3 module. I have used the border-radius and box-shadow includes enough now, that writing them in regular CSS seems an incredible chore.

I only have to write this:

@include border-radius(10px 0px 0px 10px);

To achieve this:

-moz-border-radius:10px 0px 0px 10px;
-webkit-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
-ms-border-radius:10px 0px 0px 10px;
-khtml-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;

You can see why this is awesome. If you can’t, you should stop reading. No, seriously though, how many of you actually write all of those in CSS? I don’t. I write the one for -moz, -webkit, and the last one. Compass is covering ALL of them, so in effect, it is doing more than I originally would have, and I’m writing less. So how did my stupidity grow? Good question.


The answer? I have found myself writing completely stupid crap. Let’s take nesting for example, because I seem to have broken a rule I wasn’t aware of until this discussion. Apparently, nesting anymore than 3 levels down, is complete idiocy. Didn’t know that…which makes me feel even more embarrassed. After asking a question of Compass’s creator, Chris Eppstein, if this seemed reasonable:

aside { ul { li { a {} } } }

The short answer, which was short anyway due to it being asked on twitter, was no. And as I looked at what I wrote, that answer was really all I needed. I’m nested 4 elements deep in the above example, I really only needed three, mostly likely two. Why does this matter? As one commenter put it in the linked discussion above, you have less chance of shooting yourself in the foot the larger your stylesheet becomes. Plus I’m just making it inefficient to begin with. It was totally unnecessary.

Any other issues?

Yes. DUMB ASS VARIABLES! I’m looking at my .scss file right now, and I see two variables that are totally ridiculous. I have assigned ‘left’ to $l, and ‘right’ to $r. Seriously? I can type the words ‘left’ or ‘right’ just as fast as I can calling the variable. This was not saving me anything in writing my CSS. Am I going to remove it though? No. It’s not hurting anything, and it is a reminder to myself now to think more before I type.

Another issue is, there isn’t a great resource for people new to Sass, to see what other developers have written in building an average site. I’m talking about a typical info site. I am basically flying by the seat of my pants. Luckily, a book is coming out – Sass and Compass in Action, and I’m hoping this will help in that regard. I want to see real life examples of what some good mixins are. Right now, the two I have written that I like are for calling image sprites so that all I have to do is pass the left and top position numbers. What I need though is the deeper stuff, if there are any. I think the main problem for me is, there are no real beginners. The people that created it and others using Sass seem to be hardcore Ruby programmers who are used to this type of stuff to begin with.

What does this stuff all mean?

It means I have learned a great deal using Sass for just one site. I can at least see what I have done wrong, where I can improve, and next time won’t be such a head slap to my face when seeing some of the crap I did. So if there are any experienced Sass users out there reading this, I would love to see some good mixin examples. Do you use any for font stuff? I don’t even know, but if you do, please post it in the comment section! Thank you!

Coupon Code: webmachine

Tags: ,

One Response to “My Love For SCSS And Sass Grows”

  1. I’m not sure of the technical specifications, but with CSS I notice that the more specific/nested a style, the harder it is to override. Usually #id{} can’t override elem1 elem2 elem3 div#id{} in my experience. This isn’t really an issue until you decide you want to serve up alternate stylesheets that still incorporate the bulk of your main one. Then it’s a huge pain.

Leave a Reply to Joseph McCullough