SASS - &: последний ребенок, и .last-ребенок не работает в IE8

Question

У меня SASS такой код:

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

И HTML код:

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

код выше это не работает в IE8. Я знаю, что IE8 не поддерживает: last-child, я определил .last-child для этой цели.

Когда я редактирую SASS код этого:

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

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

Все работает сейчас, но это приводит к коду дублирования.

Я добавляю .last-child для IE8 с функцией JS, но я думаю, что это не имеет значения.

Пример http://codepen.io/anon/pen/LFGAr

Answer 1

Проблема здесь заключается в том, что вы просто не можете комбинировать неподдерживаемый селектор с поддерживаемым селектора. Браузер имеет, чтобы удалить все правило. См. spec.

Поскольку вы добавляете класс .last-child с JS, может быть проще всего использовать этот класс и отказаться от использования :last-child по той простой причине, что он не поддерживается в IE8. Если вы хотите использовать :last-child и позже удалите поддержку IE8, если это когда-нибудь станет опцией, тогда вам придется жить с дублированием кода на данный момент.