LESS变量插值 [英] LESS Variable Interpolation

问题描述

我正在尝试通过使用函数和变量插值来简化我的CSS，甚至比使用LESS进行简化.直到我看了一下Hover.css的较少文件后，我才完全不知道变量插值，这对于为什么现在搞砸也就不足为奇了.

I'm trying to simplify my CSS even further than I already have with LESS by using functions and variable interpolation. I was completely unaware of variable interpolation until I took a look at Hover.css' less files which is no surprise as to why I'm screwing up now.

我正在Reddit上制作系统，但在使用变量插值时遇到了问题.

I'm working on Reddit to make a flair system and I am encountering problems using variable interpolation.

我目前正在使用以下内容作为测试:

I am currently using the below as a test:

.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无法正常工作.

That's the basic structure of what I'm doing. While testing in online compilers, .this-flair isn't working.

有人可以告诉我该怎么做吗?我正在查看LESS函数，看来这是正确的方法.

Is someone able to tell me what I can do to resolve this? I'm looking through the LESS functions and it appears as though this is the correct way to do it.

推荐答案

如上面的注释所述，您不能插值mixin或函数调用.乍一看，参数混合(具有模式匹配)是您实际需要用于此类代码段的内容:

As mentioned in comments above you can't interpolate either mixin or function calls. In a quick glance, parametric mixins (with pattern matching) are what you actually need to use for such snippets:

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

这篇关于LESS变量插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！