SASS規則重用

我有一組不同顏色的圖標，每種顏色都與CSS類聲明的不同狀態一起使用。例如，<span class="icon icon--app"><span>給出了一個灰色的應用程序圖標，而<span class="icon icon--app icon__light icon__selected"><span>給出了一個白色的應用程序圖標。SASS規則重用

以下代碼是在SCSS中編寫的。

span.icon { 
    display: inline-block; 
    width: 32px; 
    height: 32px; 

    &.icon--app { 
     background: url(../images/app_gray.png); 

     &.icon__selected { 
      background: url(../images/app.png); 
     } 

     &.icon__light { 
      background: url(../images/app_gray.png); 

      &.icon__selected { 
       background: url(../images/app_white.png); 
      } 
     } 
    } 

    &.icon--device { 
     background: url(../images/device_gray.png); 

     &.icon__selected { 
      background: url(../images/device.png); 
     } 

     &.icon__light { 
      background: url(../images/device_gray.png); 

      &.icon__selected { 
       background: url(../images/device_white.png); 
      } 
     } 
    } 
}

的問題是，還有很長的CSS規則列表如上，這股有很多相似之處的app和device等圖標。我想知道是否可以使用SASS來簡化這些CSS規則？

來源

2014-10-09 Ovilia

你有研究的CSS來看看它是否產生你期待的樣式？我懷疑它的產生超過了必要。這個問題可能更適合CodeReview.SE（你應該可以請求一個mod讓它轉移）。 – cimmanon 2014-10-09 02:48:25

從這段代碼中告訴你的意圖有點難。我編譯了你的SASS，並生成了[這個CSS]（https://gist.github.com/abitdodgy/297d063a41d6f1d4614a）。這裏沒有太多的重複。只是幾個背景聲明。雖然你可以把它封裝在一個mixin中來減少類型聲明。 – Mohamad 2014-10-09 02:53:13

我爲您創建一個混合：

@mixin icon($type) { 
    &.icon--#{$type} { 
    background: url(../images/#{$type}_gray.png); 

    &.icon__selected { 
     background: url(../images/#{$type}); 
    } 

    &.icon__light { 
     background: url(../images/#{$type}); 

     &.icon__selected { 
     background: url(../images/#{$type}_white.png) 
     } 
    } 
    } 
} 

span.icon { 
    display: inline-block; 
    width: 32px; 
    height: 32px; 

    @include icon(app); 

    @include icon(device); 
}

來源

2014-10-09 02:52:36

我覺得你可以在薩斯使用mixin：

例如

@mixin icon($type) { 
    .icon-#{$type} { 
     background: url(../images/#{$type}_gray.png); 
    } 
} 

@include icon(app); 
@include icon(device);

來源

2014-10-09 02:52:12

Upvote爲我的一個類似mixin的聲明！ – 2014-10-09 02:56:52

@hedgerh而且也是一個極其相似的答案時間！ :) – 2014-10-09 02:58:59

回答

相關問題