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

指南针在这里没有犯错，设置了背景图像，也设置了背景位置。您的期望/假设＆amp; css-properties简直错了。

Sass，指南针，@ include和@extend

1 个答案: