LESS 变量插值答案

【问题标题】：LESS Variable InterpolationLESS 变量插值
【发布时间】：2015-08-03 22:01:26
【问题描述】：

我正在尝试通过使用函数和变量插值来进一步简化我的 CSS，而不是使用 LESS。在查看 Hover.css 的 less 文件之前，我完全不知道变量插值，这对于我现在搞砸的原因并不奇怪。

我正在 Reddit 上制作一个天赋系统，但我在使用变量插值时遇到了问题。

我目前正在使用以下作为测试：

.flair.flair-one { color: red; }
.flair.flair-two { color: green; }
.flair.flair-three { color: blue; }

.custom(@a; @b; @c) {
  &::before { .flair.flair-@{a}; }
  .flair.flair-@{b};
  &::after { .flair.flair-@{c}; }
}

.this-flair {
  .custom(one; two; three);
}

这就是我正在做的事情的基本结构。在在线编译器中进行测试时，.this-flair 不起作用。

有人能告诉我我能做些什么来解决这个问题吗？我正在查看 LESS 函数，似乎这是正确的方法。

【问题讨论】：

我认为插值不适用于 mixin 调用。
正如 SLaks 已经说过的，我认为这行不通。根据您的需要，您可以尝试使用规则集和选择器格式，例如 this answer。
@Harry 这最终会比我现在拥有的更复杂和更长。
@Spedwards：我并不是要在每次通话中都通过整个规则集。您可以将规则集分配给变量（例如代码中的基类），然后将其传递。话虽如此，只有您知道它与您的真实场景的匹配程度:)
@Harry，这与我的相似，但更大。

标签： less

【解决方案1】：

如上面的 cmets 中所述，您不能插入 mixin 或函数调用。快速浏览一下，参数 mixin（带有模式匹配）是您实际需要用于此类 sn-ps 的：

.flair-flair(one)   {color: red}
.flair-flair(two)   {color: green}
.flair-flair(three) {color: blue}

.custom(@a, @b, @c) {
    .flair-flair(@b);
    &::before {.flair-flair(@a)}
    &::after  {.flair-flair(@c)}
}

.this-flair {
    .custom(one, two, three);
}

【讨论】：

不错的选择。有些事情告诉我，OP 可能会尝试将此 mixin 重新用于多个其他 *-one、*-two 选择器。
@Harry，可能。但我很确定如果他展示了更大的用例，我将能够为它制作一个基于 mixin 的等价物（唯一的阻碍可能是一些冗长/不太干的代码）。