css - Compass で生成されたスプライトにカスタム CSS を追加する

Question

私はこのコードをmy_images.scssファイルに持っています:

$icon-layout:smart;
$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

出力は次のようになります。

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... {
  background: url('/../../media/img/icon-s00227a988a.png') no-repeat;
}

.icon-asterisk {
  background-position: -108px -18px;
  height: 18px;
  width: 18px;
}

.icon-camera {
  background-position: -54px -18px;
  height: 18px;
  width: 18px;
}

出力にカスタム CSS を含めるようにコードを変更するにはどうすればよいですか。私はこれを生成したい:

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... 
{
    background: url('/../../media/img/icon-s00227a988a.png') no-repeat;

    /* My custom CSS here */
    display: inline-block;
}

重要

これにはあまり良い解決策はありません。これらは を使用して構築されているため@extend、名前付きのセレクターを追加し.icon-sprite、カスタム スタイルを含めるだけで済みます。そのようです：

.icon-sprite {
  display: inline-block;
}

$icon-layout:smart;
$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

次のようなものにコンパイルされます。

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... {
  display: inline-block;
}

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... {
  background: url('/../../media/img/icon-s00227a988a.png') no-repeat;
}
...

しかし、CSS コードを複製するのは完全に冗長です。私は生成したい:

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... {
  background: url('/../../media/img/icon-s00227a988a.png') no-repeat;
  display: inline-block;
}

コンパスを使用することは可能ですか? 前もって感謝します。