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

Question

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

Rav*_*hah 4 css jquery css3 less

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

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

在此快照中Html选择蓝色

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

在此快照中较少的文件描述

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

Answer 1

Har*_*rry 5

我建议你做以下的事情:

为用户提供预定义的主题颜色列表供您选择(可能是下拉列表).不允许输入他们想要的任何颜色,这将是一种痛苦.
当选择任何颜色追加时,颜色名称body为class使用jQuery/JS.

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

/* 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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

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

请注意,我不建议使用此选项,因为Less网站本身声明只有在没有其他选择时才应使用它.

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>

Run Code Online (Sandbox Code Playgroud)

styles.less:

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

Run Code Online (Sandbox Code Playgroud)

Plunker Demo(无法将其放入片段)

归档时间：	9 年，6 月前
查看次数：	1672 次
最近记录：	9 年，6 月前