Разрешить «пустое» имя класса в SASS для генерации утилит

Question

Мы работаем над созданием некоторых утилит и ранее дали им префикс при использовании «u:», поэтому в HTML это будет выглядеть примерно так:

<div class="u:bg-red"></div>

Сегодня мы хотели удалить префикс и просто использовать «bg-red» в этом примере, но SASS не допускает пустое имя класса.

Вот как мы сейчас генерируем:

.u\: {
    @include group();
}

(включенная группа представляет собой миксин, содержащий все утилиты)

Фактические свойства настраиваются в миксине и выглядят следующим образом:

&bg-red {
    ...
}

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

.u\@lg\: {
    @include screen-large() {
        @include group();
    }
}

Я в основном хочу иметь возможность сделать следующее:

. {
    @include group();
}

.\@lg\: {
    @include screen-large() {
        @include group();
    }
}

Но ... SASS не допускает пустое имя класса. Мы пробовали все виды побега и старались быть умными, но безуспешно!

Ближайший должен сделать:

.\ {

}

Но это приводит к пробелу перед свойством.

Спасибо за любые предложения!

Answer 1

Я не знаю всех ваших сценариев использования, но подойдет ли вам что-нибудь подобное?

@mixin group($prefix:null) {
  .#{$prefix}bg-red {
    ...
  }
}

@include group(); // To get .bg-red

@include screen-large() {
  @include group(u\@lg\:); // To get .u@lg:bg-red
}