Почему SASS изменяет цепочечные селекторы с одинаковыми именами при расширении? - PullRequest
Новая
       13

Почему SASS изменяет цепочечные селекторы с одинаковыми именами при расширении?

0 голосов
/ 24 октября 2018

Учитывая следующий код HTML / SASS: 

<div class="a">hello</div>

%color {
    color: blue;
}
.a {
  color: red;
}
.a.a {
  @extend %color;
}

Я ожидал, что полученный цвет будет синим (из-за более специфического .a.a селектора 1 ) с выводом чего-либокак это: 

.a.a {
   color: blue;
}
.a {
   color: red;
}

Но на самом деле результирующий цвет - красный, с выводом SASS: 

.a {
  color: blue;
}

.a {
  color: red;
}

Я нахожу это довольно нелогичным!

ПочемуSASS рефакторинг моего .a.a селектора на .a?

На всякий случай, если вы мне не верите, вот демонстрационная программа codepen (нажмите для просмотра скомпилированного css, чтобы увидеть вывод CSS)

ПРИМЕЧАНИЕ:

Этот «рефакторинг» селектора происходит только в объявлениях в пределах расширения.

Так что вследующий SASS: 

%color {
    color: blue;
}
.a.a {
  @extend %color;
  position: relative;
}

Вывод: 

.a {
  color: blue;
}

.a.a {
  position: relative;
}

( Codepen demo )

1 См. спецификацию :

Примечание. Повторные вхождения одного и того же простого селектора допускаются и повышают специфичность.

1 Ответ

0 голосов
/ 24 октября 2018

Судя по всему, результат зависит от парсера.Если вы используете DartSass v1.6.2 (по умолчанию на sassmeister.com), он выдаст ожидаемый результат: 

.a.a {
  color: blue;
}

.a {
  color: red;
}

Проверка на sassmeister.com (вы также можете переключать механизмы синтаксического анализа там).

LibSass v3.5.2 создает результат, на который вы пожаловались: 

.a {
  color: blue;
}

.a {
  color: red;
}
...