少量可变插值

Question

我试图通过使用函数和变量插值来进一步简化我的CSS，而不是使用LESS。直到我看了Hover.css＆＃39;我才完全没有意识到变量插值。更少的文件，这就是为什么我现在搞砸了。

我正在使用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函数，看起来这是正确的方法。

Answer 1

如上面的评论中所述，您无法插入mixin或函数调用。快速浏览一下，参数mixins（带模式匹配）是您实际需要用于此类代码段的内容：

.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);
}