How do I remove the duplication in these SCSS rules?

_posting.scss

a.comment-link {
  /* Superimposed image */
  $icon-comment-height: 10px; /* Must match the size of the graphic */
  $icon-comment-width: 10px; /* Must match the size of the graphic */

  background: $salmon url(../images/comment.gif) no-repeat $icon-comment-height $icon-comment-width;
  color: $salmon; 

  &:hover {
    background: $dark-salmon url(../images/comment.gif) no-repeat $icon-comment-height $icon-comment-width;
    color: $dark-salmon;
    text-decoration: none; 
  }
}

Interpolation? Function? Something else? I don't see it yet.

I used a mixin. It can become even more context independent by parameterising the image info (URL, height, width).

    a.comment-link {
      @mixin superimposed-comment-image($color) {
        $icon-comment-height: 10px; /* Must match the size of the graphic */
        $icon-comment-width: 10px; /* Must match the size of the graphic */
        background: $color url(../images/comment.gif) no-repeat $icon-comment-height $icon-comment-width;
        color: $color; 
      }

      /* Superimposed image */
      @include superimposed-comment-image($salmon);

      &:hover {
        @include superimposed-comment-image($dark-salmon);
        text-decoration: none; 
      }
    }

http://krasimirtsonev.com/blog/article/SASS-interpolation-in-a-name-of-variable-nest-variables-within-variables

That is how I do it, although you could use a sass function to return an interpolated string as well.

ahh, a bit late on the comment, but excellent choice ;)

Thanks. Evernoted for future reference.

I suppose I can extract the deeper pattern into a mixin, as well. Let me try that.

Not sure why the sass bit is needed here. I find the css-only version simpler here (aside from the nesting).

a.comment-link {
  background: $salmon url(../images/comment.gif) no-repeat 10px 10px;
  color: $salmon; 

  &:hover {
    background-color: $dark-salmon;
    color: $dark-salmon;
    text-decoration: none; 
  }
}

Another thing I like to do is abstract what a color is:

$link-color: $salmon;

a.comment-link {
  background: $link-color url(../images/comment.gif) no-repeat 10px 10px;
  color: $link-color; 

  &:hover {
    background-color: darken($link-color, 10%);
    color: darken($link-color, 10%);
    text-decoration: none; 
  }
}

Not syntax-checked and I'm not sur 10% is the correct darkened %.

Thanks for the example. I like the notion of abstracting the color; I'm refactoring, so I'm not there yet.