本文介绍了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中的动态变量名的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!