SCSS расширяет вложенный селектор и переопределяет вложенные наборы правил
Итак, у меня есть местозаполнитель с вложенным селектором:
%block { .title { font-size:12px; } } Я хочу расширить его и .title class .title :
.superblock { @extend %block; .title { font-weight:bold; } }
Ответ: Я хочу:
- Функция пропуска или смешение по ссылке в SASS
- Rails 4: как использовать Sass Mappings?
- Слияние селекторов от миксинов
- Gulp TypeError: Аргументы для path.join должны быть строками
- Могу ли я использовать переменные для селекторов?
.superblock .title { font-size: 12px; font-weight: bold; }
Однако я получаю ответ:
.superblock .title { font-size: 12px; } .superblock .title { font-weight: bold; }
Я что-то делаю неправильно, или это так, как это работает? Чтобы уточнить, я хочу объединить его. Если я добавлю что-то непосредственно внутри .superblock и добавлю, как другой .superblock2 который также расширяет блок%, они слияния без проблем.
- как просматривать изменения в целом каталоге / папке, содержащей много файлов sass
- Расширение селекторов из медиа-запросов с помощью Sass
- Sass @each интерполяция переменных
- Попробуйте переустановить `node-sass` на узел 0.12?
- Можно ли импортировать весь каталог в sass с помощью @import?
- Есть ли SASS.js? Что-то вроде LESS.js?
- Не удается получить sass + compass + susy из-за конфликта версий
- SASS для обновления цикла hsla lightness возвращает ошибку $ lightness: «96.77419» не является числом для `hsla '
У 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».