Basic SASS - Nesting und HTML-Syntax

Question

Ich habe gerade angefangen, SASS zu verwenden, aber ich kann keine klare Antwort/Beispiel dafür finden.

Sagen, ich habe:

<img class="socialIcons" src="/images/facebook.png"/> 
<img class="socialIcons" src="/images/google.png"/> 

ich einige zusätzliche Arten für Facebook und Google jetzt haben wollen - gibt es einige clevere SASS Syntax ich zum Beispiel verwenden können, so erhalte ich:

<img class="socialIcons-facebook" src="/images/facebook.png"/> 
<img class="socialIcons-google" src="/images/google.png"/> 

und in meinem SASS Gebrauch:

.socialIcons { 
    max-height: 30px; 
    padding-right: 10px; 

    &.facebook { 
    background: blue; 
    } 
} 

also, dass sie übernimmt den allgemeinen socialIcons Stil sowie Facebook.

Kann nicht scheinen, die Syntax zu verstehen.

Danke.

Answer 1

Sie meinen das?

<img class="socialIcons facebook" src="/images/facebook.png"/> 
<img class="socialIcons google" src="/images/google.png"/> 

Die ‚&‘ Syntax wird ein Element entsprechen, die sowohl die äußere Klasse und die Klasse mit dem & Selektor aufweist. Sie können die Klasse 'socialIcons' mit dem spezifischeren geschachtelten Selektor überschreiben. Keine Notwendigkeit, den Sass zu ändern.