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

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

它更清晰。
它类似于你在许多样式框架中看到的组件 - 修饰符结构。（例如“这不是.container;这是.container - myFramework”）
如果您使用自己的通用类在现有的Web软件中工作，很明显您的类是什么。例如，在论坛软件中建立家庭，关于或联系页面时，这很有用。

虽然您可以将＃{$ prefix}，（或者在这种情况下为＃{$ suffix}）附加到每个选择器。为每个选择器打字的痛苦可能会让你发疯。

以干燥方式实现这一目标的任何可能方式？谢谢，全部！

Answer 1

$suffix: --uk;

#{$suffix} {

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

    // Other utility selectors
    }
}

编译成：

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

根据我的理解，你不能使用＆amp;在字符串的末尾，仅在＆gt;一开始。

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

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

1 个答案: