次のような HTML があるとします。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/styles.css"></link>
</head>
<body>
This is a test
<a class="ribbons-sprite ribbons-exclusive" href="#">Exclusive</a>
<a class="ribbons-sprite ribbons-featured" href="#">Featured</a>
</body>
</html>
そして、次のようなSASS（SCSS）があります：
@import "compass/utilities";
@import "ribbons/*.png";
@include all-ribbons-sprites(true);
.ribbons-sprite {
display: inline-block;
text-indent: -9999px;
}
出力される CSS は次のとおりです。
.ribbons-sprite, .ribbons-exclusive, .ribbons-featured {
background: url('../images/ribbons-scfb85024fb.png') no-repeat;
}
.ribbons-exclusive {
background-position: 0 -38px;
height: 59px;
width: 59px;
}
.ribbons-featured {
background-position: 0 0;
height: 38px;
width: 70px;
}
.ribbons-sprite, .ribbons-exclusive, .ribbons-featured {
display: inline-block;
text-indent: -9999px;
}
最後のセレクタ リストに「.ribbons-sprite」だけでなく、すべてのクラスが含まれるのはなぜですか? スプライトにさらに多くのアイテムがあると、不必要に肥大化することがわかります。これは、スプライト ジェネレーターを使用している場合にのみ発生するようです。この行を削除すると、インライン ブロックとテキストのインデント行が共有クラス名セレクターのすぐ下になります。CSS出力として私が期待したものは次のとおりです。
.ribbons-sprite {
background: url('../images/ribbons-scfb85024fb.png') no-repeat;
display: inline-block;
text-indent: -9999px;
}
.ribbons-exclusive {
background-position: 0 -38px;
height: 59px;
width: 59px;
}
.ribbons-featured {
background-position: 0 0;
height: 38px;
width: 70px;
}