Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
使用方法
服务(node)端
- 安装
$ npm install -g less
- 编译less文件
$ lessc styles.less
- 定向编译到指定css文件
$ lessc styles.less styles.css
浏览器端
- 下载
less.js
链接:《less-v2.5.3.min.js》 - 创建less文件
styles.less
- 在html文件head中引用less文件
<link rel="stylesheet/less" type="text/css" href="styles.less" />
- 还需要引入转译less的js文件
<script src="less.js" type="text/javascript"></script>
- 或者使用CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
//cdn.bootcss.com/less.js/3.0.0-pre.3/less.min.js
<script src="//cdn.bootcss.com/less.js/3.0.0-pre.3/less.min.js"></script>
- 注意:less文件的引入位置必须在less.js的引入位置之前,不然less.js还不方便异步加载
Less 语法
Less 的语法特性跟Sass大同小异,参考官方文档,了解基本特性即可,大概也就是变量、注释、导入、作用域、混入、函数、继承的一些知识,参考 http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/
两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性,最终目的都是方便 CSS 的书写及维护。
LESS 和 SASS 互相促进互相影响,相比之下 LESS 更接近 CSS 语法