Sass 、 指南针 、 @include 和 @extend

Question

我对 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;
}

Compass 没有显示任何错误，但显示编译 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;

为什么这没有发生？

Answer 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 属性完全错误。