0

假设我有一些这样的 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;
}
4

0 回答 0