@avclark Code Sample DRY'ing

.gitignore

.sass-cache

config.rb

http_path           = "/"
css_dir             = "/"
sass_dir            = "/"
line_comments       = false
preferred_syntax    = :sass
output_style        = :expanded

screen.css

li a {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  display: block;
  padding: 10px;
  border: 1px solid transparent;
}
li a:hover {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #d5874d;
}
li a.nav-features {
  width: 62px;
  height: 16px;
  background-position: 10px -102px;
  margin-right: 5px;
}
li a.nav-features:hover {
  background-position: 10px -157px;
}
li a.nav-plans {
  width: 112px;
  height: 16px;
  background-position: 10px -212px;
}
li a.nav-plans:hover {
  background-position: 10px -268px;
}
li a.nav-customers {
  width: 106px;
  height: 16px;
  background-position: 10px 10px;
  margin-right: 5px;
}
li a.nav-customers:hover {
  background-position: 10px -46px;
}
li a.nav-support {
  width: 58px;
  height: 16px;
  background-position: 10px -324px;
}
li a.nav-support:hover {
  background-position: 10px -380px;
}

screen.sass

@import compass

// $nav-spacing: 40px
// @import "nav/*.png"

li
  a
    +hide-text
    display: block
    // Since you have the width set, this padding
    // might be adding an additional 20px to the width of each li
    padding: 10px
    border: 1px solid transparent
    &:hover
      +border-radius(4px)
      border: 1px solid #d5874d
    &.nav-features
      // +nav-sprite(features)
      width: 62px
      height: 16px
      background-position: 10px -102px
      margin-right: 5px
      &:hover
        background-position: 10px -157px
    &.nav-plans
      // +nav-sprite(plans)
      width: 112px
      height: 16px
      background-position: 10px -212px
      &:hover
        background-position: 10px -268px
    &.nav-customers
      // +nav-sprite(customers)
      width: 106px
      height: 16px
      background-position: 10px 10px
      margin-right: 5px
      &:hover
        background-position: 10px -46px
    &.nav-support
      // +nav-sprite(support)
      width: 58px
      height: 16px
      background-position: 10px -324px
      &:hover
        background-position: 10px -380px

screen.scss

@import "compass";

// $nav-spacing: 40px
// @import "nav/*.png"

li {
  a {
    @include hide-text;
    display: block;
    // Since you have the width set, this padding
    // might be adding an additional 20px to the width of each li
    padding: 10px;
    border: 1px solid transparent;
    &:hover {
      @include border-radius(4px);
      border: 1px solid #d5874d; }
    &.nav-features {
      // +nav-sprite(features)
      width: 62px;
      height: 16px;
      background-position: 10px -102px;
      margin-right: 5px;
      &:hover {
        background-position: 10px -157px; } }
    &.nav-plans {
      // +nav-sprite(plans)
      width: 112px;
      height: 16px;
      background-position: 10px -212px;
      &:hover {
        background-position: 10px -268px; } }
    &.nav-customers {
      // +nav-sprite(customers)
      width: 106px;
      height: 16px;
      background-position: 10px 10px;
      margin-right: 5px;
      &:hover {
        background-position: 10px -46px; } }
    &.nav-support {
      // +nav-sprite(support)
      width: 58px;
      height: 16px;
      background-position: 10px -324px;
      &:hover {
        background-position: 10px -380px; } } } }

Thanks Adam.

I didn't know you could use "&" in that way. That's awesome.

So, since you commented out the spite, where is the background image coming from? If you uncomment the sprite generator, then it will create a lot of duplicate classes. Is there a way to do this with a sprite and not create the duplicate classes? It could be done with replace-text, but then, you're requesting each image and hover individually.

Oh, I commented cause I don't have the image and Compass was giving me an error cause the image couldn't be found.

Oh yeah, I guess I didn't copy the image folder in. But, still I'm curious. When you use the sprite generator, it creates a class for each image in addition to the classes that are created in the above code. But I need the above code to be able to do hovers and image replacement. Is there a way to do this without duplicate classes or that just one of the downsides of using the sprite generator?

Also, what version of Sass and Compass are you using?

Sass - 3.1.6 / Compass 0.11.5

So it's not combining the classes that are created? Care to Gist a sample of the CSS?

No, it's not. I'll post something, but it will be later this evening. Thanks for your help man.