LESS:如何在其名称中包含变量的另一个变量引用的访问变量?

时间:2015-07-17 12:14:28

标签: css variables reference less

正如标题所说,我需要访问一个引用的变量内容,除了将其名称参数化之外。

这是必需的,因为我使用的库越少,引用变量。

SETUP:

正当的例子,因为如果没有用它解释,这个不清楚:

我正在使用的X库有这个mixin:

.get-color-main-variables(@name) {
  @color-50:  ~"@{name}-50";
 // ... more lines to follow like the above.
}

稍后我的代码我使用这个mixin来获取这些变量:

.generate-raised-variant (@color) {
  .get-color-main-variables(@color);

  .color-@{color}-50 {
      color : @@color-50;
  }
}

到目前为止,我可以如上所述访问这些变量。

ISSUE:

问题是我需要设置很多这些样式,所以我想到了一个生成器mixin,它以Y间隔为我生成它们,所以我做了类似的事情:

// Defining the generator.
.generator (@color, @step: 50) when (@size <= 1000) {
  .get-color-main-variables(@color);

  .color-@{color}-@{step} {
    color: @@color-50; // <------ ISSUE HERE!!!!!!
    // THIS DON'T WORK:
    // color: @@color-@step;
  }

  .generator(@color, @step + 50);
}

// And using it:
.generator(@color, 0);

我知道这是一个错综复杂的变量使用,但这是图书馆为我推迟的标准,所以:

问题:

问题是:

  • 我如何访问@@ color- @ step?
  • 或如何在不必手动指定我需要的所有颜色步骤的情况下完成该生成器?

由于

1 个答案:

答案 0 :(得分:0)

借助@ seven-phases-max和大量的反复试验,我能够实现这一目标。

以下对我有用(尽管它很奇怪):

.color-@{color}-@{step} {
    @buffer: 'color-@{step}';
    @color: @@buffer;

    color: @@color;
}