Sass：以干式方式向所有选择器添加变量后缀

为了熟悉sass并更快地构建接口，我正在构建一个样式框架。不用说，我不太会说笑。欢迎任何批评

有很多框架，但您通常会看到选择器的前缀带有一些字符串，这些字符串对于您使用的任何样式的框架都是独一无二的。 （例如，UI工具包在其所有类的前面加上“uk-”）

我计划对实用程序类（.u-）、排版类（.text-）等使用其他前缀。因此，使用一个表示“嘿，这个类来自这个样式框架”的前缀会使代码非常不可读

比如：

$prefix: uk-;

.#{$prefix} {

    &u-truncateText { 
        display: inline-block;
    }

    // Other utility selectors
}

.uk-u-truncateText { ... }

.u-truncateText--uk { ... }

不幸的是，它给您带来了如下结果：

$prefix: uk-;

.#{$prefix} {

    &u-truncateText { 
        display: inline-block;
    }

    // Other utility selectors
}

.uk-u-truncateText { ... }

.u-truncateText--uk { ... }

理想情况下，我们想要的是：

$prefix: uk-;

.#{$prefix} {

    &u-truncateText { 
        display: inline-block;
    }

    // Other utility selectors
}

.uk-u-truncateText { ... }

.u-truncateText--uk { ... }

在我看来，这很好，因为：

它更清晰

它有点类似于在很多样式框架中看到的组件-修饰符结构。（例如，“这不是一个.container；这是一个.container--myFramework”）

如果您在现有的web软件中使用自己的泛型类，那么很明显什么类是您的或不是您的。例如，在论坛软件中创建主页、关于或联系人页面时，这非常有用

而您可以将#{$prefix}（或者在本例中为#{$suffix}）附加到每个选择器。为每一个选择器输入这些信息的痛苦可能会让你发疯

是否有任何可能的方法可以以干燥的方式实现这一点？谢谢大家

$suffix: --uk;

#{$suffix} {

    @at-root {
        .u-truncateText#{&} {
           display: inline-block;
        }

    // Other utility selectors
    }
}

汇编成：

.u-truncateText--uk {
  display: inline-block; }

据我所知，不能在字符串末尾使用&，只能在>开头使用

---

另请参见：和，因此您可以使用

.u-truncatext{&}

或

{selector append（'.u-truncatext'，&）}

您所拥有的内容已尽可能短。可能重复