Question

我的所有样式都是用.less制作的，其中包括在样式表中多个类中使用的每种颜色的变量。我知道这通常是在服务器端编译并作为普通的.css发送给客户端，并且非常不鼓励编译客户端。

现在手头的任务。 我试图让它通过设置我可以改变我的webapp的一些基色。我可以想象一下这样做的几种方法。

a）手动完成所有css规则并用js替换特定颜色。听起来很乏味。

b）在浏览器中使用LESS，以某种方式更改.less变量并再次以某种方式触发重新编译.less。听起来很可能。

C）这可能是愚蠢的。向服务器发出特定类型的请求，导致它使用不同的设置（？）重新编译LESS。这不太可能是一种有效的方法。也有问题，因为页面需要重新加载。

使用.less的事实是否有助于动态更改主题？这样做的推荐方法是什么？非常感谢。

Answer 1

如果您有预设颜色选项，一种可能的方法是使用预设颜色主题的名称向data-标记添加body属性。然后使用LESS自动为所有颜色组合生成样式。

该属性是动态更改的唯一部分：

<body data-theme="blue">

在LESS中，首先定义颜色：

@theme-red:    #f00;
@theme-orange: #ffa500;
@theme-green:  #080;
@theme-blue:   #00f;
@theme-purple: #800080;
@theme-pink:   #ff69b4;

然后创建一个主题名称数组，以便循环选项。确保字符串与上面的颜色变量名称匹配：

@theme-options: 'red', 'orange', 'green', 'blue', 'purple', 'pink';
@theme-count: length(@theme-options);

然后创建一个mixin，用于为所有主题生成样式。

请注意，如果没有有效的data-theme属性，则会提供默认选项。这样，您可以将其中一种颜色作为默认颜色和/或您可以轻松定义其他默认样式。如果你已经定义了默认样式，那么这部分并不是完全必要的，但是我发现它很有用，所以我把它包括在内以防它可以帮到你：

.theme-color (@property, @default: @theme-blue) {
    & { @{property}: @default; }
    .loop-themes();
}

.loop-themes (@i: @theme-count) when (@i > 0) {
    .loop-themes((@i - 1));
    @color: extract(@theme-options, @i);
    @theme-var: 'theme-@{color}';

    body[data-theme=@{color}] & { @{property}: @@theme-var; }
}

在您定义“动态”样式的CSS的其他任何地方，当您想要使用预设的默认值时，只需使用这样的mixin：

a {
    .theme-color(background-color);
}

...当你想使用自定义值作为默认值时，就像这样：

a {
    .theme-color(background-color, #000);
}

当然，这样做的一个缺点是，无论您使用哪种主题，所有颜色的所有样式都会被加载，但是您可以自行决定是否值得。

Answer 2

首先你不能在浏览器中运行LESS。 LESS在进入页面之前会被处理成css。

但是我提供了另一种选择：

＆＃13;

var changeColor = function(){
  var element = document.getElementById('btn1');
  var color = element.getAttribute('color');
  if(color === 'blue'){
    element.setAttribute('color', 'red');
  } else {
    element.setAttribute('color', 'blue');
  }
}

＆＃13;

.button {
  border-radius: 5px;
  text-size:20px;
}

[color="blue"] {
  background-color:blue;
}

[color="red"] {
  background-color:red;
}

＆＃13;

<button id="btn1" class="button" onclick="changeColor()">color change</button>

＆＃13;

此代码仅作为如何设置css选择器的示例。基本上，您将颜色分成不同的类/选择器。

在我的原因中，只要属性被更改，颜色就会随之改变。只要定义了选择器。

这很有用，你有一堆预定义的值。但如果你想要任何颜色，那就不那么好了。在这种情况下，你可能会改变它自己的元素的风格。例如：

element.style.color = 'Some user input value';

要将它们整合在一起，您可能需要一些脚本（JavaScript，以便在用户更改颜色选择时可以运行它），这会更改所有正确的元素。

LESS编译的css中动态属性的最佳方法

2 个答案: