LESS快速上手

Less可以让我们更高效的进行CSS开发，less文件最终会编译为css文件，用于我们的项目中。

在Less中，我们可以用变量保存某些属性值，达到复用的效果；可以用混合功能复用一些代码，用匹配模式实现一些逻辑，用嵌套功能明确层次；还可以在Less使用运算和内置函数来得到最终的CSS代码。

Less中的注释

可以用/**/注释，也可以用//注释。

不过//的注释会在编译时过滤掉。

变量

Less中用@加上变量名来声明变量，比如：

@c1:blue;

混合

如下，有普通的混合，#div2使用#div1的样式；有可传参的混合，#div2使用.border的样式。

#div1{
    width:@w;
    height:@h;
    background-color:@c1;
}

#div2{
    #div1;
    .border(pink);
    background-color:@c2;
}

.border(@c){
    border:2px solid @c;
}

其中，.border传入的参数也可以默认带值：

.border(@c:black){
    border:2px solid @c;
}

混合可以用以多浏览器兼容，使写法更方便。比如解决border-radius的兼容：

.border_radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

匹配模式

根据传入条件匹配相应的样式。

.size(high,@w){
    height: 80px;
    width: @w;
}

.size(low,@w){
    height: 40px;
    width: @w;
}

#div3{
    .size(high,200px);
}

传入参数为high时，则使用条件为high的样式。

运算

可以对变量和值做加减乘除运算。

比如：

div{
    height:@h+10;
}

嵌套

传统CSS写法：

.list{}
.list li{}

嵌套写法：

.list{
    li{}
}

注意嵌套层数不能太多，影响性能。

另外，需要写伪类的时候，可以用&符号（&代表它的上一层选择器）：

a{
    &:hover{}
}

其他

避免编译

div{
    ~'';
}

~符号加上引号，引号内的代码不会被编译。

!important

和CSS中的!important用法类似，可以用于Less的混合模式：

#div2{
    #div1 !important;
}

最后

这是一篇看完慕课网less即学即用教程做的笔记，非常感谢Busy老师。

不论是慕课网的这个视频教程，还是我写的这篇文章，都是讲快速入门的东西。Less变量的使用，还有Less中内置函数的使用，都还有更多的知识可以学习。

内置函数的使用可以参考官方文档函数手册。

关于编译

Busy老师推荐的编译Less的工具是考拉，关于考拉工具我就不多说了，使用起来还是蛮方便的。

我个人使用Gulp作为前端构建工具，gulp-less插件可以编译less，还可以用gulp实现CSS代码压缩和自动刷新浏览器页面等功能，想了解的话可以查看用Gulp实现CSS压缩和页面自动刷新。