允许在 SASS 中使用'empty'类名来生成实用程序

Question

我们正在努力创建一些实用程序，并且之前在使用"u："时会给它们一个前缀，因此在HTML中看起来像下面这样：

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

今天我们想去掉前缀，在这个例子中只使用'bg-red'，但SASS不允许空的类名。

这就是我们目前生成的方式：

.u: {
    @include group();
}

(包含的

组是包含所有实用程序的混合(

实际属性在 mixin 中设置，如下所示：

&bg-red {
    ...
}

我之所以不只是在mixin中添加点，是因为我们还使用以下方法创建响应式实用程序：

.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
}