less急速上手

info

css并不是真正的”编程”语言，他并不图灵完备，无法完成像其他编程语言一样的嵌套，继承，设置变量等工作。

其超级简单而且松散的约束，让他很难有效组织代码，随着项目规模的扩大，维护会越来越困难。

less因运而生，通过对css进行预处理，less实现了一定程度上的css补缺，赋予了css一些“编程语言”的简单特性。

其实这个月又没有啥业余时间给我去看东西，所以就把项目中新用的一些东西拿出来总结说下咯。

css缺陷

无法定义变量
含有很多重复代码
无法执行计算
无法重复使用作用域和命名空间

less使用

两种，

生产上比较推崇的是后端使用，编写代码时写的是less，通过fileWatch来实时生成css文件。项目中最后引用的依然是css文件。

当然debugger的时候也可以前端使用，通过表明rel为stylesheet/less来表明这个是less文件。在之后引入less.js即可。

less特性一：变量和操作符

less中使用@关键字进行变量的定义

/*LESS代码*/
@color:#4D926F;
#header{
    color:@color;
}
h2{
    color:@color;
}
/*编译后的css代码*/
#header{
    color:#4D926F;
}
h2{
    color:#4d926F;
}

有效而规整，复用程度高的变量是好的less的基础

less特性二：使用Mixin混入

Mixin可以理解为宏，就是代码混入来实现代码重用。比如下面：

/*LESS源码*/
.rounded-corners(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -ms-border-radius:@radius;
    -o-border-radius:@radius;
    border-radius:@radius;
}
#header{
    .rounded-corners;
}
#footer{
    .rounded-corners(10px);
}
/*编译后你们也是懂的,就不写了*/

其关键词是一个.符号，和类是需要区分的。可以通过这个方法解决重复编写浏览器兼容性代码的问题。

实现“一次定义，无限使用”。

less特性三：内嵌规则

和Mixin不同的就是他重用的其实是选择器（命名空间）部分。如下有这个一个选择器冗余的css代码：

#main div li{
    list-style:none;
}
#main .container{
    margin:auto;
    width:960px;
}
#main a{
    text-decoration:none;
}
/*LESS编写*/
#main{
    div li{
        list-style:none;
    }
    .container{
        margin:auto;
        width:960px;
    }
    a{
        text-docoration:none;
    }
}

如果你有兴趣, 甚至可以写出一个和dom树平行的less结构。不过这也是需要斟酌的，毕竟less最终还是编译成css的。如果你完全copy一份dom树，那又谈何对css的精简了呢。

less特性四：运算

less中，任何数字，颜色或者变量都可以参与运算，比如：

@base:5%;
@filter:@base*2;
@other:@base+@filter;
@color:#888/4;
background-color:@base-color+#111;
height:100%/2+@filter;

less的运算能够分辨出颜色和单位, 可以使用括号来改变运算的优先级, 可以在复合属性中进行运算。

end

其实同为预处理语言的sass比less强大的多，最主要是sass这玩意还支持自定义函数，还能搞if语句和循环。

但是css本质还是一种样式配置文件，太多逻辑的应用场景其实是很少的。所以，基于nodejs，更简单更易学的less就成了最流行的css预处理语言。