javascript - 如何使用 Javascript 更改 Less CSS 变量

Question

我有类似于 THIS 的进度条我想改变的颜色。例如，当值小于 50% 时，我希望它从绿色变为黄色。

我是 Less 的新手。我有 read有更新 Less CSS 的方法。因此，如果我有一个 @circle-color 变量，我想稍后在我的 javascript 中更改它；我应该修改 var，然后更新 Less。

less.modifyVars({
    '@circle-color': '#FF4747'
});
less.refresh();

到目前为止，我已经试过了，但没有用 here .有没有简单的方法可以做到这一点？我错过了一些基本的东西吗？这是我认为以前可能已经回答过的问题之一，但我们还是试试吧。

Answer 1

可以通过在样式中使用较少的插件功能而不是较少的变量来实现这一点(另请参阅短两步版本没有较少的插件)。您只需要编写一个简短的插件(就像编写 getter 和 setter 一样简单)来重新/存储变量。存储插件的示例也在 less 文档中 -> http://lesscss.org/features/#plugin-atrules-feature-plugin-scope只需寻找“商店”。我将介绍使用 less 插件功能更改颜色所需的所有步骤:

<强>1。创建更少的插件:在 less 文件旁边创建 mylessplugin.js。它将只包含安装函数中的获取和设置函数:

module.exports = function() {
    let COLORPLUGIN = {
        install: (less, pluginManager, functions) => {
            let storedColor = '#FFFFFF';

            functions.add('setcolorfn', (themeColor) => {
                storedColor = themeColor ? themeColor : '#FFFFFF';
            });

            functions.add('getcolorfn', () => {
                return storedColor;
            });
        }
    };
    return COLORPLUGIN;
};

<强>2。将您的插件导入 less 文件。 使用 @plugin less 会将您的 .js 文件识别为 less 插件。 less 文件做了什么？也许看起来很复杂，但很容易。我们可以将自己的属性设置为 body 元素，该元素将存储我们稍后要使用 javascript 设置的颜色。我将其命名为 --data-active-color 并为其赋值“#FFFFFF”。下一行将使用 var() @setActiveColorFn: setcolorfn(~"var(--data-active-color)") 从我们的 less 插件中调用 set 函数以将值存储在插件中。所以我们的插件现在知道颜色设置为“#FFFFFF”。这就是 body 元素的全部内容。然后我们将创建简单的 mixin，它将使用 less 插件中的 get 函数设置属性颜色。请参见 .active-color。或者你可以使用 mixin 来设置你在括号中传递的属性。在我们的 less 文件中要做的最后一件事是使用我们的 mixin 扩展类 .con-active-color。如果您将此类放置到要修改的元素 (.container { .con-active-color;}) 中，它将自动更改为您存储的颜色:

@plugin "plugin/path/mylessplugin";

.con-active-color {
  &:extend(.active-color);
}

body {
  --data-active-color: '#FFFFFF';
  @setActiveColorFn: setcolorfn(~"var(--data-active-color)");
}

.active-color-background {
  background-color: getcolorfn();
}

.active-color {
  color: getcolorfn();
}

.active-param (@param) {
  @{param}: getcolorfn();
}

<强>3。用js改变颜色。 最后一步也很简单。例如，使用元素输入类型='color' onchange='changeColor()' 创建颜色选择器，并在 changeColor 函数中根据需要修改 body 元素的 --data-active-color 属性。此属性的所有更改将我们的 less 文件存储在我们的 less 插件中，它将自动返回使用我们的 mixin 的类中的存储值。因此，您可以轻松存储您的颜色 f.e。在 localStorage 中并将其设置为 body 元素。就是这样:

document.body.style.setProperty("--data-active-color", myNewColor);

或者你也可以跳过使用less插件，直接使用body参数。所以你只需要:

<强>1。创建 less 文件，您可以在其中为我们在 body 中的存储参数设置默认值并创建 mixin:

@my-color: '#FFFFFF';

body {
    --data-color: @my-color;
}

.color-mixin (@property) {
    @{property}: ~"var(--data-color)";
}

<强>2。用js改变颜色。(同上一版第三步)。例如，使用元素输入类型='color' onchange='changeColor()' 创建颜色选择器，并在 changeColor 函数中根据需要修改 body 元素的 --data-color 属性。然后只需在要修改的元素中使用 mixin(例如 .color-mixin(background-color);)。就是这样:

document.body.style.setProperty("--data-color", myNewColor);