获取动态背景颜色,使用 LESS 应用于单独的元素
Get Dynamic Background Color, Apply to Separate Element Using LESS
这里有很多关于使用 LESS 动态更新颜色的讨论,例如:dynamically change LESS variables in page with JavaScript。但我还没有看到具体解决我的挑战的东西。
我们公司提供的网络软件可为用户提供比 UI 更广泛的灵活性,包括整体背景颜色。但是有许多他们无法更改的元素需要具有背景颜色才能提供适当的用户体验(参见我的 Bootstrap Glyphicon 问题 - 当然会欢迎也在那里回答)。我想找到一种解决方案,可以在任何给定时间将用户设置的任何内容用作背景色,并将其动态应用于其他元素。我可以通过 Javascript 来做到这一点,但似乎我应该能够利用我们在应用程序堆栈中使用 LESS 来有效地创建一个未设置的 mixin,它根据用户的 UI 选择动态更新。我尝试了很多尝试来制定一个 LESS 解决方案,但无济于事。
我是不是找错人了?在我走 JS 路线之前,我想看看是否有人可以针对这一挑战提出基于 LESS 的解决方案。一如既往,在此先感谢您提供的任何帮助。
只需在 less 中使用变量,但您需要在浏览器中转译或让服务器在变量更改时重新转译 css
我通常不在浏览器中使用 LESS,但是根据提供的文档 here 你可以 link 到 javascript 文件,该文件将你的 less 文件编译为
<!-- 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 提供。
这里有很多关于使用 LESS 动态更新颜色的讨论,例如:dynamically change LESS variables in page with JavaScript。但我还没有看到具体解决我的挑战的东西。
我们公司提供的网络软件可为用户提供比 UI 更广泛的灵活性,包括整体背景颜色。但是有许多他们无法更改的元素需要具有背景颜色才能提供适当的用户体验(参见我的 Bootstrap Glyphicon 问题
我是不是找错人了?在我走 JS 路线之前,我想看看是否有人可以针对这一挑战提出基于 LESS 的解决方案。一如既往,在此先感谢您提供的任何帮助。
只需在 less 中使用变量,但您需要在浏览器中转译或让服务器在变量更改时重新转译 css
我通常不在浏览器中使用 LESS,但是根据提供的文档 here 你可以 link 到 javascript 文件,该文件将你的 less 文件编译为
<!-- 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 提供。