SASS: restreindre une règle sur tagname

Question

Très souvent, je dois écrire quelque chose comme:

h1, h2, h3, h4, h5, h6 { 
    font-family: 'myfont'; 
    font-weight: normal; 
    &.public { 
    color: $white; 
    } 
} 

Mais je voudrais ajouter une règle spécifique à h1.public seulement. De couse, je pourrais ajouter:

h1.public { 
    font-size: 2em; 
} 

mais c'est parce que mon exemple est simple et toujours ce n'est pas vraiment DRY. Ce que j'aimerais, c'est l'avoir enveloppé dans mon code. Quelque chose comme:

h1, h2, h3, h4, h5, h6 { 
    font-family: 'myfont'; 
    font-weight: normal; 
    &.public { 
    color: $white; 
    &:only(h1) { 
     font-size: 2em; 
    } 
    } 
} 

Tout comme media queries travail.

Y a-t-il un moyen de le faire?

Answer 1

Vous avez différentes approches possibles:

See in live

/* Version 1: with @at-root */ 
h1 { 
    @at-root &, h2, h3, h4, h5, h6 { 
    font-family: 'myfont'; 
    font-weight: normal; 
    &.public { 
     color: #FFF; 
    } 
    } 
    &.public { 
    font-size: 2em; 
    } 
} 

/* Version 2: with placeholders */ 
%org-heading { 
    font-family: 'myfont'; 
    font-weight: normal; 
    &.is-public { 
    color: #FFF; 
    } 
} 
@for $i from 1 to 6 { 
    h#{$i} { 
    @extend %org-heading; 
    @if 1 == $i { 
     &.is-public { 
     font-size: 2em; 
     } 
    } 
    } 
} 

/* Version 3: with modular approach */ 
.org-heading { 
    font-family: 'myfont'; 
    font-weight: normal; 
    &--public { 
    color: #FFF; 
    &.isFirst { 
     font-size: 2em; 
    } 
    } 
}