css - SASS/Compass 更好地组织

Question

每个人。
我开始学习如何使用 SASS 和 Compass，并希望寻求建议以更好地组织这段代码

.main-link.first-item {
  @include background(image-url($bg-sprite) no-repeat -27px -39px,
                      linear-gradient(#4b4e58, #3f424a));

  &:hover {
    @include background(image-url($bg-sprite) no-repeat -27px -1px,
                        linear-gradient(#4b4e58, #3f424a));
  }

如何在不重复的情况下使用线性渐变，而只改变图像的位置？

Answer 1

您只需要调整第一张图片的背景位置即可。

&:hover {
    background-position: -27px -1px, 0 0;
}