SASS/Compass更好的组织

Question

大家。
我开始学习如何使用SASS和Compass和whant以更好地向组织建议将此代码段

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

如何使用线性渐变不repeting，但只改变图像的位置？

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