Question

我们正在创建一些实用程序，并且在使用'u：'时已为其赋予了前缀，因此在HTML中看起来类似于以下内容：

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

今天，我们想删除前缀，在此示例中仅使用'bg-red'，但是SASS不允许使用空的类名。

这是我们当前生成的方式：

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

（包含的组是一个包含所有实用程序的mixin）

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

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

在SASS中允许“空”类名生成实用程序

1 个答案: