Question

大家。
我开始学习如何使用SASS和指南针并想要更好地组织这段代码的建议

.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

我同意@ cimmanon的回答。

虽然如果你想在不同样式表中的不同元素上反复使用相同的东西，我建议创建一个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);
  }
}

SASS / Compass更好地组织

2 个答案: