SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Melbourne, Australia
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cleaning up CSS using LESS or SASS?

    Given CSS like this:
    Code:
    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.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    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.
    The only code I hate more than my own is everyone else's.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Did you setup the 'meta' and 'source-xxxx' classes? Is there a reason you can't choose 1?
    Something like this.
    Code css:
    .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.
    Code:
    @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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Location
    Melbourne, Australia
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •