Ra *_*ead 2 less twitter-bootstrap
我使用的bootstrap定义了更少的变量,@body-bg以此为例.我创建了一个定义的颜色主题@background.要将两者粘合在一起,我会执行以下操作:
@body-bg: @background
现在,我希望能够在颜色主题之间切换.因此我使用较少的'watch功能进行更改@background,但似乎没有将其传播到@ body-bg并且实际上切换到bootstrap默认值.
我不想做以下任何一种情况
less.modifyVars({ '@body-bg': '#FFFF00' })less.modifyVars({ '@background': '#FFFF00', '@body-bg': '@background' })因为还有许多其他变量@background.
这是一些测试页面.
Problem.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="problem.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js#!watch" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="less.modifyVars({ '@background': '#FF0000' })">Apple Style!</a>
<a href="#" onclick="less.modifyVars({ '@background': '#FFFF00' })">Banana Style!</a>
</body>
</html>
problem.less
@background: #FF0000;
@import "bootstrap/bootstrap.less";
@body-bg: @background;
问题似乎是如果less.env设置为production导入的文件以一种奇怪的方式缓存,并且在调用之后不会加载less.modifyVars():
https://github.com/less/less.js/pull/721#issuecomment-11611703
因此,设置环境development似乎可以解决问题:
修改后的标记:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="less/problem.less" />
<script type="text/javascript">
less = { env: "development" };
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js#!watch" type="text/javascript"></script>
</head>
<body>
<a href="javascript:void(0)" onclick="less.modifyVars({ '@background': '#FF0000' })">Apple Style!</a>
<a href="javascript:void(0)" onclick="less.modifyVars({ '@background': '#FFFF00' })">Banana Style!</a>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
506 次 |
| 最近记录： |