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