SASS/나침반 더 나은 조직

Question

모두.
나는 SASS와 나침반과 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.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); 
    } 
}