Question

假设我生成了一些用mixin创建的变量......就像那样：

@grey:                  lighten(@black, 50%);

.generate-color-shades(
    @color,
    @shades: 10%
) {
    @{color}-50:  darken(@color, (@shades * 4.9));
    @{color}-100: darken(@color, (@shades * 4.5));
    @{color}-150: darken(@color, (@shades * 4.2));
    @{color}-200: darken(@color, (@shades * 3.5));
    @{color}-250: darken(@color, (@shades * 3));
    @{color}-300: darken(@color, (@shades * 2.5));
    @{color}-350: darken(@color, (@shades * 2));
    @{color}-400: darken(@color, (@shades * 1.5));
    @{color}-450: darken(@color, (@shades));
    @{color}-500: @color;
    @{color}-550: lighten(@color, (@shades));
    @{color}-600: lighten(@color, (@shades * 1.5));
    @{color}-650: lighten(@color, (@shades * 2));
    @{color}-700: lighten(@color, (@shades * 2.5));
    @{color}-750: lighten(@color, (@shades * 3));
    @{color}-800: lighten(@color, (@shades * 3.5));
    @{color}-850: lighten(@color, (@shades * 4.2));
    @{color}-900: lighten(@color, (@shades * 4.5));
    @{color}-950: lighten(@color, (@shades * 4.9));
}

.generate-color-shades(@grey, 10%);

而不是简单地称之为：

@navbar-bg: @grey-550;

或动态地说：

// COLORS
// -------------------------------------

@test-colors:
    grey-50    @grey-50,
    grey-100   @grey-100,
    grey-150   @grey-150,
    grey-200   @grey-200,
    grey-250   @grey-250,
    grey-300   @grey-300,
    grey-350   @grey-350,
    grey-400   @grey-400,
    grey-450   @grey-450,
    grey-500   @grey-500,
    grey-550   @grey-550,
    grey-600   @grey-600,
    grey-650   @grey-650,
    grey-700   @grey-700,
    grey-750   @grey-750,
    grey-800   @grey-800,
    grey-850   @grey-850,
    grey-900   @grey-900,
    grey-950   @grey-950,
;

.test {
    .for(@test-colors); .-each(@i) {
        @classname: extract(@i, 1);

        &-@{classname} {
            background: extract(@i, 2),
        }
    }
}

当然，由于LESS变量现在如何工作的明显原因，这两种类型的调用都会导致错误......

问题是 - 如何避免这个错误，并且仍然能够像@variableSyntax调用那样简单地调用和处理这些变量？

我应该以某种方式预编译已生成变量的LESS文件吗？

或许还有一些新的解决方法我还不知道？）

提前致谢，以获得更多帮助！

Answer 1

AFAIK，您无法在Less。

中动态生成变量名称

我认为你的代码不是很易于维护，因为即使你生成了这些颜色变量，你也会直接在你的样式的其他部分调用它们，这使得它们不是那么“动态”＃34;实际上，如果你想稍后改变颜色，改变所有变量调用并不容易。

如果您认为darken和lighten不够好，您可能需要实现Less插件来提供自己的自定义函数来处理您自己的阴影参数。

使用LESS调用动态创建的变量

1 个答案: