SASS - &: last-child, & .last-child ne fonctionne pas dans IE8 - internet-explorer-8, sass, css-selectors

J'ai le code SASS comme ceci:

li {
&:last-child, &.last-child {
color: red;
}
}

Et le code HTML:

<ul>
<li class="last-child">Hello there!</li>
</ul>

Le code ci-dessus ne fonctionne pas dans IE8. Je sais que IE8 n'est pas pris en charge: last-child, j’ai défini .last-child à cette fin.

Quand j'édite le code SASS à ceci:

li {
&:last-child {
color: red;
}

&.last-child {
color: red;
}
}

Tout fonctionne maintenant, mais cela conduit à la duplication de code.

J'ajoute .last-child pour IE8 avec la fonction JS, mais je pense que cela n'a pas d'importance.

Exemple http://codepen.io/anon/pen/LFGAr

Réponses:

Le problème ici est que vous ne pouvez tout simplement pas "combiner un sélecteur non pris en charge avec un sélecteur pris en charge. Le navigateur a pour abandonner la règle entière. Voir le spec.

Depuis que vous ajoutez le .last-child classe avec JS, il peut être plus simple de simplement utiliser cette classe et de renoncer à l'utilisation de :last-child pour la simple raison qu’il n’est pas pris en charge dans IE8. Si vous souhaitez utiliser :last-child et supprimer le support IE8 plus tard si cela devient une option, vous devrez vivre avec la duplication de code pour le moment.