在浏览器端使用less.js解析less文件

非常喜欢 less 的变量、混合以及嵌套。当不断重复书写 CSS 时,嵌套 CSS 必不可少,却又略显多余。因为大部分情况下,它并没有提升编写 CSS 的能力,只是不断地重复。

了解到有多种 CSS 的扩展语言,首先尝试使用 less。

less 的特性有很多,支持变量、混合、嵌套、函数、运算、颜色函数、命名空间、作用域、文件引入、甚至 JavaScript 表达式。

利用 less.js 解析 less

第一步,引入 style.less 文件

<link rel="stylesheet/less" type="text/css" href="/static/ran/less/site/common.less?1.0.0"/>

注意 rel 属性需要设置为 stylesheet/less。

第二步,引入 less.js 文件

<script src="http://cdn.bootcss.com/less.js/2.5.3/less.min.js?1.0.0"></script>

一定要在所有 less 文件之后引入 less.js。

第三部,保证 common.less 可以通过 AJAX 输出

因为 less.js 通过 ajax 下载 common.less 文件,所以若 common.less 与当前网站不在同域,可能会导致无法下载。
若 common.less 与当前网站不同域,需要在 header 信息中增加 Access-Control-Allow-Origin,允许网站通过 AJAX 访问。

作者: 袖之欢

科技改变生活,编程改变世界。

发表评论

电子邮件地址不会被公开。 必填项已用*标注