SCSS расширяет вложенный селектор и переопределяет вложенные наборы правил

Итак, у меня есть местозаполнитель с вложенным селектором:

%block { .title { font-size:12px; } } 

Я хочу расширить его и .title class .title :

 .superblock { @extend %block; .title { font-weight:bold; } } 

Ответ: Я хочу:

 .superblock .title { font-size: 12px; font-weight: bold; } 

Однако я получаю ответ:

 .superblock .title { font-size: 12px; } .superblock .title { font-weight: bold; } 

Я что-то делаю неправильно, или это так, как это работает? Чтобы уточнить, я хочу объединить его. Если я добавлю что-то непосредственно внутри .superblock и добавлю, как другой .superblock2 который также расширяет блок%, они слияния без проблем.

У Sass нет функций для «слияния» дубликатов селекторов. Вам нужно будет найти еще одну утилиту для этого после компиляции CSS.

Директива @extend – это не просто способ использования classов вместо mixins (аналогично вызовам mixed LESS). Почему @extend работает так, как становится ясно, когда вы расширяете обычные classы, а не расширяете classы:

 .block { font-size:12px; } .foo { @extend .block; font-weight: bold; } 

Вывод:

 .block, .foo { font-size: 12px; } .foo { font-weight: bold; } 

Использование classа extend просто подавляет излучение исходного имени classа.

Теперь, когда вы видели, почему @extend работает так, как вы это делаете, вы все еще хотите, что предлагает @extend ? Если ответ отрицательный, тогда вам нужно использовать mixin:

 @mixin block { // styles .title { font-size: 12px; @content; } } .superblock { @include block { font-weight: bold; } } 

Вывод:

 .superblock .title { font-size: 12px; font-weight: bold; } 

Это в значительной степени. SASS производит расширенные объявления отдельно.

И у него нет функциональности группировки объявлений с помощью селектора, это не так уж и умно.

Но вам не нужно так беспокоиться о чистоте CSS. Современные веб-серверы обслуживают CSS gzipped, все дублирование будет приятно сжато.

МЕНЬШЕ может это сделать. Однако вы должны написать:

 .superblock { .title { .block .title; } } 

Не уверен, что он работает с @extend.

Вы можете использовать инструменты, я использовал его для очистки css https://github.com/addyosmani/grunt-uncss

«Задача для удаления неиспользуемого CSS из ваших проектов с помощью UnCSS».

  • @import в сообщении @if в Sass
  • Могу ли я импортировать внешний файл с sass?
  • Placeholder Mixin SCSS / CSS
  • Использование Sass Variables с CSS3 Media Queries
  • Sass Invalid CSS Error: "ожидаемое выражение"
  • Как вы удаляете устройство из любого числа в SASS?
  • Использование шрифтов с конвейером Rails
  • Как назначить глобальную переменную в Sass?
  • Динамическое создание или ссылка переменных в Sass
  • Узел Sass еще не поддерживает вашу текущую среду: Linux 64-бит с ложным
  • У LESS есть функция «расширения»?
  • Давайте будем гением компьютера.