css - SASS/指南针更好地组织

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

Answer 2

我同意@cimmon 的回答。

尽管如果您想在不同样式表中的不同元素上一遍又一遍地使用相同的东西，我建议创建一个 mixin 并将其放入单独的 sass 文件中。您可以将其导入到您需要的文件中：

# mixin.css.scss
@mixin custom-background($bg-sprite, $position-vertical, $position-horizontal) {
  @include background(image-url($bg-sprite) no-repeat $position-vertical $position-horizontal,
                        linear-gradient(#4b4e58, #3f424a));
}

# some.css.scss
@import "mixin.css.scss"

.main-link.first-item {
    @include custom-background($bg-sprite, -27px, -39px);
  &:hover {
    @include custom-background($bg-sprite, -27px, -1px);
  }
}