嵌套類在SASS

Question

我有以下代碼：

 li { 
      a { 
       /* style removed for brevity */ 
       &:hover { 
        color:#4f9269; 
        @include background-image(linear-gradient(top, #fff, #f0f6f2)); 
       } 
      } 
      &.active a { 
       color:#4f9269; 
       @include background-image(linear-gradient(top, #fff, #f0f6f2)); 
      } 
     } 

當一個菜單項是活動活動類應用到裏，所以我不得不應用CSS這樣。

我也consiedered寫一個mixin：

@mixin activestate() { 
    color:#4f9269; 
    @include background-image(linear-gradient(top, #fff, #f0f6f2)); 
} 

，然後做這個：

 li { 
      a { 
       /* style removed for brevity */ 
       &:hover { 
        activestate(); 
       } 
      } 
      &.active a { 
       activestate(); 
      } 
     } 

通常用CSS我會寫這樣的事情

li a:hover, li.active a { 
    /* active styles here */ 
} 

我想知道如果SASS實現類似輸出的方式？

Answer 1

SCSS可以使用與CSS相同的語法。而且，CSS與SCSS完全兼容。所以，你可以使用：

li a:hover, li.active a { 
    @include activestate(); 
} 

或者在SASS：

li:hover, li.active a 
    +activestate() 

Answer 2

或者無需編寫額外的mixin：

li { 
    /* styles removed for brevity */ 
    a { 
    /* styles removed for brevity */ 
    } 
    &.active a, 
    a:hover { 
    color:#4f9269; 
    @include background-image(linear-gradient(top, #fff, #f0f6f2)); 
    } 
}