1 less 安装使用
安装
sudo npm install node-less
使用
mkdir less
cd /less
lessc demo1.less > test1.css
lessc -x demo1.less > test1.css (压缩)
2 为什么使用less
面向对象思想很重要的是继承和封装，我们也可以使用这种思想考虑css编写。
页面上的css从页面功能上来说，一般分为2类：结构性和装饰性的。
结构性:比如表格，列表，布局，定位。装饰性:比如字体，块内容，背景，边框，方框。
我们在根据设计图构建html结构时，考虑的css首先是结构性，比如布局，定位。我们一般会把整个页面分成几个部分，从设计角度来说就是模块。大模块的布局定位搞定之后，再到深入到模块里面。这个分层分块的思路其实就是封装的概念，每个模块看成一个黒盒子，先不管，把几个大的黑子拍整齐后，在深入大盒子里面。盒子里面也可以这么处理。
但是盒子和盒子之间可能有些相同部分，比如背景，比如字体，比如定位。如果把相同的部分拿出来，就有继承概念了。
使用模块化的方式构建html和css时，会使整个页面结构清晰，样式条理，方便后续的维护，但是有时候我们会遇到这样的情况：
(1) div1包含div2、div3,div2宽度固定，div3宽度=div1宽度-div2的宽度。设计样式时，我们针对每个div设计了样式，我们需要手动计算div3的宽度。如果设计有变更div2的宽度变了，或者div1的宽度变了，于是我们不得不重新计算div3的宽度，于是我们的工作量来了。
(2) div1包含div2、div3，div2、div3的结构性样式不同，但是有部分修饰性样式相同，比如字体和背景相同，于是们设计了一个类font-Bg加在div2和div3的class上，可以这样的话，你不得不面对这样一种风险，当div2和div3的字体和背景不同时，你要修改div2和div3的class，新增样式。为了减少这种修改，div2和div3各自设计一个class，但是他们之间确实有相同的样式，所以这个css的设计比较纠结，要么维护困难，要么费事费力。
遇到类似以上这些问题，我们有没有好的办法解决呢？
3 怎么使用less
less可以较好的解决上面遇到问题。
less主要的特性：变量及运算，混入（mixin），嵌套。
针对上述中第一个问题，我们使用变量就可以解决。
@div1Width:500; @div2Width:200px; .div1cls { width:@div1Width; } .div2cls { width:@div2Width; } .div3cls { width:(@div1Width)-(@div2Width); }
如果有div1和div2的width有变动，只需要修改@div1Width或@div2Width就可以了。
编译后：
.div1cls { width: 500; } .div2cls { width: 200px; } .div3cls { width: 300px; }
针对第二个问题，可以使用混入的方法：
.font-bg { font-size:12px; background-image:url('demo.png'); } .div2cls { float:left; .font-bg } .div3cls { float:right; .font-bg }
如果有变动只需要修改css文件，编译就可以，而不需要修改html文件。这个继承的意思。公共样式都可以抽出来，需要的话，直接混入就可以。和extjs上apply类似。
编译后：
.font-bg { font-size: 12px; background-image: url('demo.png'); } .div2cls { float: left; font-size: 12px; background-image: url('demo.png'); } .div3cls { float: right; font-size: 12px; background-image: url('demo.png'); }
还有一种比较复杂的应用就是嵌套，考虑这样的场景：
div1包含div2、div3，div1背景图片是image1.png, div2背景变为白色，字体变成12px，div3背景为黄色，字体变成8px。当鼠标移动到div1上时，div1背景图片变成image2.png,div2背景变成红色，字体变成16px，div3背景变成绿色，字体变成8px。
我们会这样设计：
.div1{ background-image:url('image1.png'); } .div1 .div2{ font-size:12px; background-color:white; } .div1 .div3{ font-size:8px; background-color:yellow; } .div1hover{ background-image:url('image2.png'); } .div1hover .div2{ font-size:16px; background-color:red; } .div1hover .div3{ font-size:8px; background-color:green; }
这样看着是不是有点乱，是的，略显得不简洁。我们用less的方法改造一下：
.div1 { background-image:url('image1.png'); .div2{ font-size:12px; background-color:white; } .div3{ font-size:8px; background-color:yellow; } } .div1hover{ background-image:url('image2.png'); .div2{ font-size:16px; background-color:red; } .div3{ font-size:8px; background-color:green; } }
这样是不是感觉很简洁，嵌套关系很清晰？
less还有其他很多用法，可以帮助你编写更易维护，更清晰的css。大家去探索吧。