薩斯，對不同勢類

Question

我有一些代碼，看上去某事像這樣相同的屬性：

.elephant 
    background: yellow 

    .young-eph 
     color: white 

.tiger 
    background: yellow 

    .young-tgr 
     color: white 

我怎樣才能改善這種代碼？

在CSS中，你可以寫多個類相同的屬性與逗號

.elephant, .tiger { 
    background: yellow 
} 

但如何做，與青菜？

Answer 1

你幾乎和正常的css一樣薄。只需在中間插入一個逗號即可。

.elephant, .tiger { 
    background: yellow 

    .young-eph, .young-tgr { 
    color: white 
    } 
} 

在這種情況下，我會用.young tho取代.young-eph和.young-tgr。在這種情況下有兩個不同的類別看起來多餘。之後新的信息

如果你有深厚的繼承像

.elephant, .tiger { 
    background: yellow 

    .young { 
    color: white 
    } 
} 

編輯我只是改變了類一點。我通常避免使用擴展。

，如果你使用的類.eph，.tgr，.adult，以及。年輕。很 你幾乎可以只是這樣做：

.adult { 
    background: yellow 

    .young { 
    color: white 
    &.very { 
     padding-left: 30px; 
    } 
    } 
} 

&意味着該物體同時。年輕和。很，所以根據需要你可能不需要它 你也很可能不需要嵌套所有這些，更多的代碼（包括一些HTML）可能會很好。

Answer 2

語法相同。 Sass被轉換爲css，這意味着你可以在你的.scss文件和sass中編寫好的ole文件。

這是有效的青菜：

.elephant, .tiger { 
    background: yellow; 
} 

.elephant { 
    border: dotted blue 1px; 

    .young-eph { 
    color: cyan; 
    } 
} 

.tiger { 
    border: dotted red 1px; 

    .young-tgr { 
    color: magenta; 
    } 
} 

這裏有一個plunker的鏈接。

編輯：要將next question：

.elephant 
    background: yellow 
    .young-eph 
     color: white 
     .very-young-eph 
      padding-left: 30px 

也許你可以讓一個類.animal和內部[class*="young-"]和[class*="very-young-"]然後你就可以使用擴展。

.animal 
    background: yellow 

    [class*="young-"] { 
     color: white 

     [class*="very-young-"] { 
      padding-left: 30px