LESS CSS中的动态变量名 | CSS中的动态变量名

本文介绍了LESS CSS中的动态变量名的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在尝试一会儿，看其他答案，但没有效果。希望有人可以帮助我。

I have been trying this for a while, looking at other answers, but to no avail. Hopefully someone can help me.

我想在mixin中生成一些动态变量名。

I am trying to generate some dynamic variable names within a mixin.

变量已定义：

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

等。

希望会是这样的：

.horizontal-variant(@variant) {
    color: @{horizontal-@{@variant}-color}
}

调用：

.horizontal-default{
   .horizontal-variant(~"default");
}
.horizontal-inverse{
   .horizontal-variant(~"inverse");
}

是

.horizontal-default {color: #fff}
.horizontal-inverse {color: #000}

不幸的是我每次都遇到错误。

Unfortunately I run into errors every time.

我知道这可以做， Awesome LESS其中 @ {fa-css-prefix} 在变量中定义。我只是无法在我的项目中运输相同的解决方案。

I know this can be done, I have seen it being used in Font Awesome LESS where @{fa-css-prefix} is defined in variables. I am just having trouble transporting the same solution in my project.

您可以尝试在

推荐答案

您可以使用。我已在测试代码，它可以正常工作。

You can use Variable Names. And I've tested the code at http://lesstester.com/, it works.

@horizontal-default-color: #fff;
@horizontal-inverse-color: #000;

.horizontal-variant(@variant) {
  @color: "horizontal-@{variant}-color";
  color: @@color;
}

.horizontal-default{
  .horizontal-variant(~"default");
}
.horizontal-inverse{
  .horizontal-variant(~"inverse");
}

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