将动态变量从 HTML 传递到 less.css 文件答案

【问题标题】：Pass dynamic variable from HTML to less.css file将动态变量从 HTML 传递到 less.css 文件
【发布时间】：2016-09-27 21:30:48
【问题描述】：

我刚刚开始使用 Less。我现在希望根据从 HTML 文件传递的值更改背景颜色。例如在 HTML 文件中选择蓝色而不是所有背景设置为蓝色，如果选择黄色而不是所有背景设置为黄色。

机制是改变外观和填充的颜色。用户可以根据自己的要求更改主题。因此，当用户更改颜色时，应更改站点颜色的所有主题。以下是我考虑传递所选颜色的方式

这就是我希望在 less.css 文件中分配值的方式。

那么，我该如何实现这个场景呢？

【问题讨论】：

Less 网站不建议从前端修改 vars。你有多少这样的颜色选择？你不能为每种颜色创建静态类吗？
在大多数情况下，LESS 在浏览器中渲染之前进行编译。因此，一旦将 HTML 和 LESS 文件提供给最终用户，它们之间就没有通信。当按下按钮时，您更有可能想要使用 Javascript 来切换新的“主题”类。添加有关您要完成的工作的更多详细信息（更改颜色的机制是什么/为什么），我会看看是否可以提供帮助。
嗨，哈利.. 有 20 种颜色可供选择.. 我可以为每种颜色制作静态类吗？？
改变外观和填充颜色的机制。明智的用户可以根据他的要求更改他的主题。所以当用户更改颜色时，网站颜色的所有主题都应该更改。
嗨，例如，在下拉列表中有多种颜色可用，现在用户可以更改在 less 文件中传递的任何颜色并动态更改页面中的颜色.. 比如何实现这一点.. 使用 less ..

标签： jquery css less

【解决方案1】：

我建议您执行以下操作：

为用户提供一个预定义的主题颜色列表以供选择（可能是一个下拉列表）。不允许输入任何他们想要的颜色，那会很痛苦。
选择任何颜色附加时，颜色名称到body作为class使用jquery / js。

在 Less 中，编写以下代码，静态编译并将编译后的 CSS 链接到您的页面。

body { 
  background-color: red; /* default */
  &.red {background-color: red;} 
  &.green{background-color: green;} 
  &.blue{background-color: blue;}
}

window.onload = function() {
  document.querySelector('#color-chooser').addEventListener('change', function() {
    document.body.className = this.value;
  });
}

/* compiled CSS based on the Less code provided above */

body {
  background-color: red;
  /* default */
}
body.red {
  background-color: red;
}
body.green {
  background-color: green;
}
body.blue {
  background-color: blue;
}

<label>Select Background Color:</label>
<select id='color-chooser'>
  <option value='red'>Red</option>
  <option value='blue'>Blue</option>
  <option value='green'>Green (Hex)</option>
</select>

或者，如果您坚持通过前端动态执行，那么您可以使用modifyVars 选项：

请注意，我不建议将此选项作为 Less website itself states that it should be used only when there is no other choice。

HTML：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
</head>
<body>
  <label>Select Background Color:</label>
  <select id='color-chooser'>
    <option value='red'>Red</option>
    <option value='blue'>Blue</option>
    <option value='#0F0'>Green (Hex)</option>
  </select>
  <script type="text/javascript" language="javascript">
    document.querySelector('#color-chooser').addEventListener('change', function(){
      less.modifyVars({ /* this sets the color to the variable */
        '@bgcolor': this.value
      });
    });
  </script>  
</body>
</html>

styles.less:

body {
  background-color: @bgcolor;
}
@bgcolor: red;

Plunker Demo（无法将其放入 sn-p）

【讨论】：

@RaviShah：你不需要 15 个代表来接受。该限制仅用于投票。您只需单击该勾号即可接受。