Sass, gleiche Eigenschaften auf diffrent Klasse

Question

ich einen Code haben, die etw wie folgt aussieht:

.elephant 
    background: yellow 

    .young-eph 
     color: white 

.tiger 
    background: yellow 

    .young-tgr 
     color: white 

Wie kann ich diesen Code verbessern?

In CSS können Sie

gleiche Eigenschaften für mehrere Klassen mit Komma schreiben

.elephant, .tiger { 
    background: yellow 
} 

aber wie mit sass zu tun?

Answer 1

Sie tun ziemlich genau so dünn wie in normalen CSS. Setzen Sie einfach ein Komma dazwischen.

.elephant, .tiger { 
    background: yellow 

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

In diesem Fall würde ich .Young-eph und .Young-tgr von .Young tho ersetzen. 2 verschiedene Klassen zu haben, sieht in diesem Fall redundant aus.

.elephant, .tiger { 
    background: yellow 

    .young { 
    color: white 
    } 
} 

EDIT nach neuen Informationen

Wenn Sie tief Erbe wie das haben würde ich die Klassen ein wenig ändern, nur. Ich vermeide generell die Verwendung von extend.

wenn Sie die Klassen verwenden .eph, .tgr, .adult, .Young und .very Sie können ziemlich genau dies tun:

.adult { 
    background: yellow 

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

& bedeutet, dass das Objekt sowohl .Young hat und .very , so abhängig von den Notwendigkeiten, die Sie möglicherweise nicht benötigen Sie auch höchstwahrscheinlich müssen nicht alle von ihnen verschachteln, mehr Code (einschließlich etwas HTML) könnte nett sein.

Answer 2

Die Syntax ist gleich. Sass wird nach css transpiliert, was bedeutet, dass Sie sowohl in Ihren .scss-Dateien als auch in sass gute CSS-Dateien schreiben können.

Dieses gilt sass:

.elephant, .tiger { 
    background: yellow; 
} 

.elephant { 
    border: dotted blue 1px; 

    .young-eph { 
    color: cyan; 
    } 
} 

.tiger { 
    border: dotted red 1px; 

    .young-tgr { 
    color: magenta; 
    } 
} 

Hier ist ein Link zu einem plunker.

EDIT: Um Ihre next question:

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

Vielleicht können Sie eine Klasse machen .animal und innen [class*="young-"] und [class*="very-young-"] die Sie dann erweitern können zu.

.animal 
    background: yellow 

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

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