获取动态背景颜色，使用 LESS 应用于单独的元素答案

【问题标题】：Get Dynamic Background Color, Apply to Separate Element Using LESS获取动态背景颜色，使用 LESS 应用于单独的元素
【发布时间】：2016-03-19 03:50:07
【问题描述】：

这里有很多关于使用 LESS 动态更新颜色的讨论，例如：dynamically change LESS variables in page with JavaScript。但我还没有看到专门解决我的挑战的东西。

我们公司提供的网络软件为用户提供了广泛的 UI 灵活性，包括整体背景颜色。但是有许多他们无法更改的元素需要具有背景颜色才能提供适当的用户体验（参见我的 Bootstrap Glyphicon 问题here——当然也欢迎那里的答案） .我想找到一个解决方案，将用户在任何给定时间设置为背景颜色并将其动态应用于其他元素。我可以通过 Javascript 来做到这一点，但似乎我应该能够利用我们在应用程序堆栈中使用 LESS 来有效地创建一个未设置的 mixin，它会根据用户的 UI 选择动态更新。我尝试了许多尝试来制定 LESS 解决方案，但无济于事。

我是不是找错树了？在我走 JS 路线之前，我想看看是否有人可以针对这一挑战提出基于 LESS 的解决方案。与往常一样，提前感谢您在这里提供的任何帮助。

【问题讨论】：

标签： javascript twitter-bootstrap-3 less glyphicons

【解决方案1】：

我通常不在浏览器中使用 LESS，但通过 here 提供的文档，您可以链接到将您的 less 文件编译为的 javascript 文件

<!-- Here: include any less plugin scripts, any required browser shims and optionally set less = any options  -->
<script src="less.js"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<link data-dump-line-numbers="all" data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

更好的方法是使用配置驱动的 CSS 生成器，它根据一组参数生成 CSS 文件并通过 CDN 提供服务。

【讨论】：

【解决方案2】：

只需在 less 中使用变量，但您需要在浏览器中转译或让服务器在变量更改时重新转译 css

【讨论】：