Less

（二）Less/Sass扩展CSS

问题概述：

CSS太简陋缺少样式的加运算，每次都要重写，不能很好利用相同部分的样式。总而言之就是不能像编程语言一样灵活的操作CSS。（这也没办法，本来就是视图UI的事情，没想到程序员要求这么多）

实际场景：

.a{
    color: red;
    margin-top: 30%;
}
.b{
    color: red;
    margin-top: 30%;
    border: 2px
}
.c{
    color: red;
    margin-top: 40%;
    border: 2px
}

b是a的扩展却要重写所有a中的样式，c是b的一个参数值的改动也要重写其余内容。

less vs sass

Less和Sass是扩展CSS的两个代表，以下引自知乎：
* SASS2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
* LESS2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。

less demo

他们的功能类似，这里就以less举例子（sass要装ruby懒得装）
安装less

npm i -g less

写a.less文件

/*------------变量---------*/
//双斜杠注释生成css文件后自动消失
@v1: red;
#header{
    color:@v1;
}
/*---------Mixin（混合）---------*/
.a{
    color: red;
    margin-top: 30%;
}
.b{
    .a;
    border: 2px
}
/*----------传参的Mixin----------*/
.aa(@p:30%){//这里默认参数30%
    color: red;
    margin-top: @p;
}
.c{
    .aa(40%);
    border:2px;
}  
/*---------带条件判断的Mixin---------*/
@t: 10%;
.aaa(@p) when (@p < 30%){
    color: red;
    margin-top: @p + 10%;//注意四则运算需要前后空格隔开
}
.aaa(@p) when (@p > 30%){
    color: red;
    margin-top: @p - 10%;
}
.d{
    .aaa(13%);
}
/*---------内嵌---------*/
div{
    color:red;
    p{
        margin-top:2px;
    }
}
/*引入其他css或less文件*/
//@import 'xx.css/less'

两种方式解析：
1直接将less转换成css

lessc a.less a.css (-x可以压缩css)

2在html中css引入的时候rel属性为stylesheet/less，然后要引入less.js

<link rel="stylesheet/less" type="text/css" href="a.less" />
<script src="less.js" type="text/javascript"></script>

推荐第一种，第二种是既浪费流量，又浪费浏览器性能。

sass的用法参考大牛阮一峰的入门教程http://www.ruanyifeng.com/blog/2012/06/sass.html

小结

css因为先天的缺陷，缺少变量、混合等方便的用法，less是css的简单扩充，用法简单，但可以减少工作量。bootstrap源码就是less构建的。不过于此同时我们应该搞清楚less的使用场景，如果项目中css很少的情况中，是不需要less来加快css开发的。