Cleaning up CSS using LESS or SASS?

Given CSS like this:


ul#socialfeed li.source-twitter .meta, ul#minifeed li.source-twitter .icon, .social .twitter a
{
        background-image: url(icons/social/twitter.gif); /** sprite-ref: mainsprite; */
}

ul#socialfeed li.source-pinboard .meta, ul#minifeed li.source-pinboard  .icon
{
        background-image: url(icons/social/pinboard.gif); /** sprite-ref: mainsprite; */
}
ul#socialfeed li.source-rss .meta, ul#minifeed li.source-rss .icon
{
        background-image: url(icons/social/rss.png); /** sprite-ref: mainsprite; */
}
...

Is there any way to make it look ‘nicer’ using LESS or SASS, using mixins or something?

The comments are used by SmartSprites to convert the images into sprites.

I personally wouldn’t do either options because the only benefit is that the CSS “looks” nicer. It’s not a fair tradeoff to have JS take care of this stuff and/or Ruby

Given that, from what I’ve read online about mixins (this might be wrong since I’ve never ever used it before), I doubt you’ll find something that looks nicer because you’d still need a long selector like that either inside the brackets, or outside being a selector.

This is from a total SASS/LESS noobie so take it with a grain of salt :).

Loops are available in SASS so you can create the rules for sprites using at the minimum 3 lines with a loop. Sure beats repeating the same thing x amount of times changing a class selector and manually incrementing the background offset.

Did you setup the ‘meta’ and ‘source-xxxx’ classes? Is there a reason you can’t choose 1?
Something like this.


.source-twitter .icon {
  background-image: url(icons/social/twitter.gif); /** sprite-ref: mainsprite; */
}
.source-pinboard .icon {
  background-image: url(icons/social/pinboard.gif); /** sprite-ref: mainsprite; */
}
.source-rss .icon {
  background-image: url(icons/social/rss.png); /** sprite-ref: mainsprite; */
}

But, personally I’d use compass for sprites which would look like this.


@import "source/*.png";
@include all-source-sprites;

Ryan, no-one should use the .js version of a compiler client-side.
Try out SASS, among other benefits one of the strongest is that allows you to use new functions that haven’t yet made their way into browsers - nested rules, variables. etc. I think you’d like it if you started using it.

Did you setup the ‘meta’ and ‘source-xxxx’ classes? Is there a reason you can’t choose 1?

Yeah I did. It was my attempt at using sprites without having to do much changing of the HTML. I like avoiding empty elements just for icons, when I can.

Loops are available in SASS so you can create the rules for sprites using at the minimum 3 lines with a loop. Sure beats repeating the same thing x amount of times changing a class selector and manually incrementing the background offset.

Interesting… I’ve been using LESS which doesn’t have loops. I might have to take a look at SASS :slight_smile: