0

我对 Sass 有疑问，这与创建精灵然后重用已编译的类有关。这是我的styles.scss：

@import 'buttons/*.png';
@include all-buttons-sprites;

@import 'partial/buttons';

这是buttons.scss：

.buttons {
  @extend .buttons-blue-button;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  cursor: pointer;
  border: none;
  font-size: 18px;
  width: 242px;
  height: 45px;
  font: sky-text-med;
  padding-bottom: 5px;
  margin: 24px 4px 14px;
  opacity: 0;
}

指南针没有说任何错误，但编译 css 显示：

.buttons-sprite, .buttons-blue-button, .buttons, .buttons-blue-hover-button, .buttons-yellow-button, .buttons .yellow, .buttons-yellow-hover-button {
  background: url('/welcome/assets/img/buttons-s5afcdf1a60.png') no-repeat; }


.buttons-blue-button, .buttons {
  background-position: 0 0; }

.buttons {
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  cursor: pointer;
  border: none;
  font-size: 18px;
  width: 242px;
  height: 45px;
  font: sky-text-med;
  padding-bottom: 5px;
  margin: 24px 4px 14px;
  opacity: 0; }

但是缺少应该由@extend .buttons-blue-button 设置的背景；

为什么这没有发生？

4

1 回答 1

1 
.buttons {
    @extend .buttons-blue-button;
    ...
}

您正在告诉 .button 类扩展.button-blue-button 类。

.buttons-sprite, .buttons-blue-button, .buttons, .. {
    background: url('/welcome/assets/img/buttons-s5afcdf1a60.png') no-repeat;
}

.buttons-blue-button, .buttons {
  background-position: 0 0;
}

指南针在这里没有出错，设置了背景图像，也设置了背景位置。您的期望/假设和 css 属性是完全错误的。

于 2013-09-08T12:21:16.637 回答