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

时间:2016-03-18 19:18:42

标签: javascript twitter-bootstrap-3 less glyphicons

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

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

我是在叫错树吗?在我走JS路线之前,我想看看是否有人可以为这一挑战建议一个基于LESS的解决方案。一如既往,感谢您提供的任何帮助。

2 个答案:

答案 0 :(得分:1)

只需使用较少的变量,但是您需要在浏览器中进行转换或让服务器在变量更改时转换css

答案 1 :(得分:1)

我通常不会在浏览器中使用LESS,但是根据提供的文档here,您可以链接到编译较少文件的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提供服务。