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开发的。