Question

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

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

In this snapshot Html Select blue Color

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

In this snapshot less file description

那么，我该如何实现这种情况呢？

Answer 1

我建议你做以下的事情：

为用户提供一个预定义的主题颜色列表供您选择（可能是一个下拉列表）。不要让他们想要任何颜色，这将是一种痛苦。
当选择任何颜色追加时，使用jQuery / JS将body的颜色名称设为class。

在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（无法将其放入代码段）

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

1 个答案: