我正在考虑少用.js(看起来很棒),但我们的网站要求在初始页面加载后动态加载某些样式.但是,似乎必须在less.js脚本加载之前加载所有LESS样式表.即这是有效的
<link rel="stylesheet/less" href="/static/less/style.less"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>
但如果换行,它会失败,firefox和chrome都不会尝试加载'style.less',除非它们被正确排序.本教程中明确指出了排序要求.
有没有办法在初始页面加载后加载较少的样式表？
请注意,此博客描述了"观看"功能 -
这将在您保存LESS代码时自动刷新CSS
因此,期望我可以在页面加载后添加一些LESS规则似乎是合理的.感觉就像我错过了一些东西.
干杯,
科林
更新:用于测试注释中描述的行为的代码(脚本后列出的样式表更少) -
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/static/js/less-1.0.31.min.js"></script>
<link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
</head>
<body>
<div id="container">
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div id="#abc">Bingo</div>
</body>
<script>
console.log("refreshing styles...");
less.sheets.push(document.getElementById('abc123'));
//var lessStyle = $("<style>#abc { color: blue; }</style>").attr("id", "less:static-less-style").attr("type", 'text/less');
//$("head").append(lessStyle);
less.refresh(true);
console.log("refreshed...");
</script>
</html>
和较少的样式表 …
可以在less.js中使用库从浏览器中的较少文件动态重新生成css.如果有一种简单的方法来修改较少的代码,这将是动态更新站点的CSS的一种非常强大的方法.
想象一下,你有一种在大型网站上使用过100次的颜色.如果你想仅使用javascript动态改变颜色,你需要更新具有该颜色的每一位css(可能是50行代码).
根据我的想象,您需要编写的所有东西都是这样的:
$('@mainColour').value('#F04');
我正在考虑自己去做,但这听起来像一个巨大的项目,我想知道是否有人已经开始这样的事情？
编辑:澄清,理想情况下我想要做的是采用一串Less代码,以编程方式编辑它(可能使用类似jquery的选择器语法),然后将其吐出为修改后的Less.理想情况下,代码是在Javascript中(但不一定是客户端)我上面给出的示例是一个可能的应用程序但可能不是一个好的(可能有更好的更常见的方法来实现它).