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

08-11 01:35