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

【问题标题】：Sass: Adding variable suffix to all selectors in a DRY waySass：以 DRY 方式向所有选择器添加变量后缀
【发布时间】：2015-04-30 21:37:05
【问题描述】：

我正在整理一个样式框架，以便让自己熟悉 sass 并更快地构建接口。不用说，我不太擅长 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 { ... }

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

更清晰。
它有点类似于你在许多样式框架中看到的组件——修饰符结构。（例如“这不是 .container；这是 .container--myFramework”）
如果您正在使用具有自己的通用类的现有 Web 软件，那么很明显哪些类是您的或不是您的。例如，在论坛软件中创建主页、关于或联系页面时，这很有用。

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

有什么可能的方式可以通过 DRY 方式实现？谢谢大家！

【问题讨论】：

你所拥有的已经很短了。
Append the parent selector to the end with Sass的可能重复

标签： sass

【解决方案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',&)}

【讨论】：