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; 
  }
}

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.