如何使用Javascript更改Less CSS变量


How do I change a Less CSS variable with Javascript

我有一个类似于此的进度条，我想更改其颜色。
例如，当该值小于50％时，我希望它从绿色变为黄色。

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

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

到目前为止，我在这里都没有尝试过。
有没有简单的方法可以做到这一点？我缺少基本的东西吗？
这是我认为以前可能已经回答过的问题之一，但还是让我们尝试一下。

相关讨论

可以通过在样式中使用较少的插件功能而不是较少的变量来实现此目的(另请参见简短的两步版本，而无需较少的插件)。您所需要做的就是编写一个简短的插件(就像写getter和setter一样容易)以重新/存储变量。存储插件的示例也在较少的文档中-> http://lesscss.org/features/#plugin-atrules-feature-plugin-scope只是查找" store"。我将介绍使用更少的插件功能来更改颜色的所有必要步骤：

1。创建更少的插件：
在less文件旁边创建mylessplugin.js。它仅在安装函数中包含get和set函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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。将您的插件导入较少的文件。使用@plugin，less会将您的.js文件识别为更少的插件。用更少的文件做什么？也许看起来很复杂，但是很容易。我们可以将我们自己的属性设置为body元素，该元素将存储我们稍后要使用javascript设置的颜色。我已将其命名为--data-active-color并为其分配了值'#FFFFFF'。接下来的行将调用我们的less插件中的set函数，以使用var()@setActiveColorFn在插件中存储值：setcolorfn(?" var(-data-active-color)")。因此，我们的插件现在知道颜色设置为" #FFFFFF"。仅此而已。然后，我们将创建简单的mixin，它将使用less插件中的get函数设置属性颜色。请参阅.active-color。或者，您可以使用mixin来设置您在方括号中传递的属性。在我们的less文件中，最后要做的就是使用我们的mixin扩展类.con-active-color。如果将此类放置到要修改的元素(.container {.con-active-color;})上，它将使用您存储的颜色自动更改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@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更改颜色。最后一步也很简单。例如，使用元素输入type ='color'onchange ='changeColor()'创建颜色选择器，然后在changeColor函数中根据需要修改body元素的--data-active-color属性。此属性的所有更改都会将我们的less文件存储在less插件中，该插件将自动返回使用mixin的类中的存储值。这样您就可以轻松存储颜色f.e.在localStorage中并将其设置为body元素。仅此而已：

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

或者您也可以跳过使用较少插件的操作，而直接使用body参数。因此，您需要做的是：

1。创建更少的文件，您可以在其中为主体中的storage参数设置默认值，并创建mixin：

1
2
3
4
5
6
7
8
9
@my-color: '#FFFFFF';

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

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

2。用js更改颜色。 (与先前版本中的第3步相同)。例如，使用元素输入type ='color'onchange ='changeColor()'创建颜色选择器，然后在changeColor函数中根据需要修改body元素的--data-color属性。然后只需在要修改的元素中使用mixin(例如.color-mixin(background-color);)。仅此而已：

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

我不知道这是否正是您要查找的内容，但是您可以像这样使用变量：

1
2
3
4
5
6
7
8
9
10
11
.selector {
  color: @variable;

  &.50percentclass {
    color: @variable + #012345; /* any hex-value and subtraction is also possible */
  }

  &.100percentclass {
    color: @variable + #whatever;
  }
}

或者您可以简单地以这种方式更改颜色值，如下所示：

1
2
3
4
5
6
7
8
9
10
11
.selector {
  color: @variable;

  &.50percentclass {
    color: yellow;
  }

  &:100percentclass {
    color: green;
  }
}

我看到的问题是，只要进度栏达到某个阈值，您就必须依靠Javascript添加这些类。

这是一篇关于CSS仅进度条的精彩文章：https：//css-tricks.com/css3-progress-bars/

相关讨论