Sass:以DRY方式为所有选择器添加变量后缀

Question

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

有很多框架，但您通常会看到选择器前面有一些字符串，这些字符串对于您使用的任何风格的框架都是唯一的。(例如，UI Kit在其所有类的前缀为"uk-"http://getuikit.com/docs/grid.html)。

我计划为实用程序类(.u-)、排版类(.text-)等使用其他前缀。因此，使用表示"嘿，这个类来自这个样式框架"的前缀会使代码变得非常不可读。

所以类似于：

$prefix: uk-;
.#{$prefix} {
&u-truncateText { 
display: inline-block;
}
// Other utility selectors
}

不幸的是，它会给你带来这样的东西：

.uk-u-truncateText { ... }

理想情况下，我们想要这样的东西：

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

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

1. 更清晰
2. 它有点遵循你在很多风格框架中看到的组件-修饰符结构。(例如，"这不是.contator；这是.contator--myFramework")
3. 如果你在现有的网络软件中使用自己的通用类，那么什么类是你的或不是你的就很明显了。例如，当在论坛软件中创建主页、关于主页或联系人页面时，这很有用

虽然您可以将#{$prefix}，(或在本例中为#{$suffix})附加到每个选择器。为每一个选择器都输入这种信息的痛苦可能会让你发疯。

有什么可能的方法可以以干燥的方式实现这一点？谢谢大家！

Answer 1

$suffix: --uk;
#{$suffix} {
@at-root {
.u-truncateText#{&} {
display: inline-block;
}
// Other utility selectors
}
}

编译为：

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

据我所知，你不能使用&在字符串的末尾，仅在>开头。

另请参阅：https://github.com/sass/sass/issues/1612和http://sass-compatibility.github.io/#ampersand_sassscript，因此您可以使用.u-truncateText#{&}或#{selector-append('.u-truncateText',&)}