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

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

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

Я хочу расширить его и добавить в класс .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, который также расширяет блок%, они сжимаются без каких-либо проблем.

Ответ 1

У Sass нет функций для "слияния" дублирующих селекторов. Вам понадобится найти другую утилиту, чтобы сделать это после того, как CSS был скомпилирован.

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

.block {
  font-size:12px;
}

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

Вывод:

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

.foo {
  font-weight: bold;
}

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

Теперь, когда вы видели, почему @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;
}

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

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