Question

说我有这样的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;
}

为什么最后一个选择器列表包含所有类，而不仅仅是＆＃39; .ribbons-sprite＆＃39;？我可以看到，如果我在精灵中有更多的物品，它会不必要地膨胀。这只是我使用精灵生成器时的情况。如果我删除此行，则内联块和文本缩进行位于共享类名称选择器下。这就是我期望的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;
}

使用Compass精灵，生成的CSS使用所有类名和共享名

0 个答案: