Question

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

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

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

到目前为止，我已经尝试了这一点here。有一个简单的方法吗？我错过了什么基本的东西？这是我觉得之前可能已经回答过的问题之一，但无论如何我们都要尝试。

Answer 1

我不知道这究竟是你要找的，但你可以像这样使用你的变量：

.selector {
  color: @variable;

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

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

或者你可以简单地改变颜色值，如下所示：

.selector {
  color: @variable;

  &.50percentclass {
    color: yellow;
  }

  &:100percentclass {
    color: green;
  }
}

我认为这样做的问题是，只要进度条满足某个阈值，就必须依赖Javascript来添加这些类。

以下是关于CSS仅限进度条的精彩文章：https://css-tricks.com/css3-progress-bars/

Answer 2

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

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

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较少，您会将.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;}）上，它将使用您存储的颜色自动更改：

@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元素。就是这样：

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

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

1。创建更少的文件，您可以在其中为我们的存储参数设置默认值，并创建mixin：

@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）;）。就是这样：

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

如何使用Javascript更改Less CSS变量

2 个答案: