Sass、指南针、@include和@extend

Sass、指南针、@include和@extend,sass,compass-sass,Sass,Compass Sass,我对Sass有问题，这与创建sprite和以后重用编译的类有关。 这是my 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

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

@import 'partial/buttons';

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

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

.buttons {
    @extend .buttons-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;
}