簡化Sass中的類似選擇器

Question

我有以下類似的選擇器，並試圖在Sass中重構它們。什麼是最有效的方式來做到這一點？

.test table td em.green, 
.test table td em.red, 
.test table td strong.green, 
.test table td strong.red, 
.report table td em.green, 
.report table td em.red, 
.report table td strong.green, 
.report table td strong.red {} 

Answer 1

這應做到：

.test, .report { 
    td { 
     em, strong { 
      &.red, &.green { 
       color: red; 
      } 
     } 
    } 
} 

請注意，您只需要table或td，但不能同時（因爲TD的必須是表內表的後裔，內容必須是TD內， th或標題標籤）。

Answer 2

看看@extend或使用@mixin：

例如用@extend可以擴展其他類的屬性，只覆蓋你需要什麼。像這樣：

.error { 
    border: 1px #f00; 
    background-color: #fdd; 
} 
.error.intrusion { 
    background-image: url("/image/hacked.png"); 
} 
.seriousError { 
    @extend .error; 
    border-width: 3px; 
} 

使用@mixin將允許您創建一個藍圖輕鬆創建一個類的另一個實例。例如：

@mixin sexy-border($color, $width) { 
    border: { 
    color: $color; 
    width: $width; 
    style: dashed; 
    } 
} 

p { @include sexy-border(blue, 1in); }