1、什么是Less？

​ less官网：Less is More , Than CSS -少即是多，比CSS

​ 官网gitHub：

1.1 Less介绍

Less是一门css预处理语言，或是一种动态样式语言。扩展了css语言，增加了变量、继承、嵌套、运算、函数等特性，使css更易维护和扩展。（类似jquery）

Less既可以在浏览器端上运行（支持IE7+、chrome、ff等主流浏览器，不支持iPad 待测试），也可以在Node服务器端运行。

例如：

@base: #f938ab;@width:200px;.box-shadow(@style, @c) when (iscolor(@c)) {    width:@width;    height:@width;    margin-top:20px;  -webkit-box-shadow: @style @c;  box-shadow:         @style @c;}.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {  .box-shadow(@style, rgba(0, 0, 0, @alpha));}.box {  color: saturate(@base, 5%);  border-color: lighten(@base, 30%);  .div1 { .box-shadow(0 0 5px, 30%) }  .div2{      .box-shadow(5px 5px 5px 5px,@base);  }}

解析：

.box {  color: #fe33ac;  border-color: #fdcdea;}.box .div1 {  width: 200px;  height: 200px;  background-color: red;  color: #fff;  margin-top: 20px;  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}.box .div2 {  width: 200px;  height: 200px;  background-color: red;  color: #fff;  margin-top: 20px;  -webkit-box-shadow: 5px 5px 5px 5px #f938ab;  box-shadow: 5px 5px 5px 5px #f938ab;}

现在流行的css预编译语言：Less和Sass

1.2 Less的优点

• 简单，易于维护，CSS管理更加容易
• 高效的进行开发
• 使用Less实现配色将变得非常容易。
• 与CSS能够很好地融合使用。
• 同时兼容CSS3

2、如何调用less

2.1 Less调用方法

• 运用GUI工具运用工具koala或者SimpLess是来自动解析成.css文件（已给大家讲过，这里不在重复）
• 引用less.js进行解析，在页面引入less.js对.less文件进行解析。
• less官网在线解析：
• 运用node来解析成css
• 利用gulp等自动化工具进行解析研究中

2.2 GUI工具Koala

• Source Map：编译过程中生成 css 对应的 map 文件。调试时使用，有了source map，浏览器里直接显示less，非常方便
• Line Comments：保留注释，勾选后编译中在注释上一行添加一条空行。
• Autoprefix：自动给 CSS3 元素加上浏览器前缀。

  参考：

2.3 服务器端解析： less.js解析

• 第一步，引入styls.less，注意 rel=“stylesheet/less”

  1、内联样式：

​ 2、外联样式

• 第二步，参数配置（可省略）具体意思待研究

参数	类型	默认值	参数	说明
evn	String	取决于页面的URL		可以在development或是production环境下运行。
logLevel	Number	2	2 - 提示信息（Information）和错误（errors）1 - 错误（Errors）0 - 空（Nothing）	javascript控制台日志量（错误等级）。注意：在production环境下，获取不到日志。
async	Boolean	false	false、true	是否异步导入文件
fileAsync	Boolean	false	false	使用文件协议访问页面时异步加载导入的文件。
poll	Integer	1000		在监视模式下，每两次请求之间的时间间隔（ms）。
functions	Object	空		在functions这个对象中，key作为函数的名字。
dumpLineNumbers	String	空	comment、mediaQuery、all	当设置dumpLineNumbers直接输出源行信息到编译好的CSSS的文件中时，有利于你调试指定行。
relativeUrls	Boolean	false		是否调整相对路径。如果为false，则url已经是相对于入口的LESS文件。
rootpath	String	false		添加到每个URL开始处的路径

• 第三步，引入less.js，在此前加入.less文件。

• 第二步和第三步一起

• 注意：

  • 如果加载多个.less样式表文件，每个单独编译，一个文件中定义的任何变量都无法再其他文件中访问。不会存在变量重复问题。
  • 在服务器环境下使用，本地直接打开可能会报错！
  • Less兼容IE7+，如需兼容则需要先引入即可。
  • 其中还有一些高级配置，也可通过浏览器直接调试，具体见参考文档。
  • 不建议使用，增加服务器压力，不利于调试。

2.4 Node解析

• 先按照node.js

• 下载less的管理工具包

  $ sudo npm install -g less

• 执行方法解析成css文件

  $ lesssc styles.less styles.css

• 解析成min.css文件，安装clean-css

  $ npm install clean-css

  $ lessc --clean-css styles.less styles.min.css

• node上安装即时编译的插件

  $ (sudo) npm install -g less-watch-compiler$ less-watch-compiler path_input path_out$ less-watch-compiler path_input path_out fileName.less

• 添加厂商前缀

  $(sudo) npm install -g less-plugin-autoprefix$ less inputFile.less outFile.less —autoprefix=“browsers”$ lessc test.less test.css --autoprefix="ie >= 8, last 3 versions, > 2%"

2.5 IDE 对应的插件

• SublimeText：、、、
• Dreamweaver：
• Notepad++ 6.x：
• Brackets：内置支持 语法高亮，还有一些扩展

3、Less语法详解

3.1 注释

• /** 可解析 **/
• //不可解析

3.2 变量

变量@来定义，允许单独定义一系列通用的样式，然后在需要的时候进行调用。

//less                          @cGray:#ccc; @cRed:red;@width:80px;@height:120px;.div1{  color:@cGray;  border:1px solid @cGray;  width:@width;  height:@height;}.div2{  color:@cRed;  background:@cGray;  width:@height;  height:@width;}

/*生成的css*/.div1 {  color: #cccccc;  border: 1px solid #cccccc;  width: 80px;  height: 120px;}.div2 {  color: #ff0000;  background: #cccccc;  width: 120px;  height: 80px;}

3.3 嵌套

在一个选择其中嵌套另一个选择器来实现继承，减少代码量，代码更清晰。代码优化考虑，最多嵌套三层。

有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素

// LESS#demo2 {  h2 {    font-size: 18px;    font-weight: bold;  }  p {     font-size: 12px;    color:#90bd39;    a { text-decoration: none;      &:hover { text-decoration: underline; }    }  }}

/* 生成的 CSS */#demo2 h2 {  font-size: 18px;  font-weight: bold;}#demo2 p {  font-size: 12px;  color:#90bd39;}#demo2 p a {  text-decoration: none;}#demo2 p a:hover {  text-decoration: underline;}

3.4 运算

运算提供了加减乘除操作，可以对任何数字、颜色、变量进行运算，可以实现属性值之间的复杂关系。和Javascript代码一样。

//less@basewidth: 100px;@baseColor: #111;@blue: #09c;.div1 {  color: @baseColor * 3;  height: @basewidth;  width: @basewidth * 2;}.div2 {   color: @baseColor + #003300;  background-color: desaturate(@blue, 10%);}

/* 生成的 CSS */.div1 {  color: #333333;  height: 100px;  width: 200px;}.div2 {   color: #114411;  background-color: #0a94c2;}

运算有顺序，和平时的四则运算一样

@var: 20px;.div3 {  width: @var + 5 * 2;  height: (@var + 5 ) * 2;}

.div3 {  width: 30px;  height: 50px;}

3.5 颜色函数

• 色轮，spin(param1,param2)函数

  • 互补色，互补的颜色正好在色轮相反的位置

    @colorBase:#3bafdA;@colorComplement:spin(@colorBase,180);//得到#dc6939

  • 三元色。我们可以进一步探讨颜色模型并且创建一个三元色结构。“三元”，顾名思义，是由三种颜色组成。因此，我们将色轮分成三部分，并且用函数spin()来设置旋转的度数：

    @triadicSecondary:spin(@colorBase,-(360/3));//第二种颜色#b1d926@triadicTertiary:spin(@colorBase, 360/3);//第三种颜色#db43b2

• 混合色，mix(param1,param2)，对两个颜色进行混合

  #div1{color:mix(red,yello)}//#ff800

• 明暗度，lighten(param1,param2)浅一点，darken(param1,param2)深一点

  @ahover:lighten(@colorBase,10%);@afocus:darken(@colorBase,10%);

• 饱和度，saturate(param1,param2)和desaturate(param1,param2)。饱和度定义了一种颜色的深度。饱和度越大，颜色越亮丽，最低饱和度则会使颜色趋于灰色。

  @btnHover:saturate(@colorBase,10%);@btnFocus:desaturate(@colorBase,10%);@btnDisable:lightness(desaturate(@colorBase,100%),30%;

• 智能色彩输出。LESS让我们的样式变得更智能。举例来说，我们能让我们的样式自己“思考”并决定什么颜色在什么条件下适用。假设我们正在创建一个网站模板，这是按钮的

  基本样式，你打算用不同的颜色和风格来扩展它。但是我们怎样控制颜色的输出呢？我们当然不希望深色的文字在深色的背景上，反之亦然。我们需要确保文本保留对比，以便于阅读，这样，contrast()函数就派上用场了。

  @bColor:#000;div{  background-color:@bColor;  color:contrast(@bColor);//#ff}

3.6 继承

混合可以将一个定义好的class A轻松引入到另个class B里面，从而简单实现class B继承class A中的所有属性。还可以带参数调用，和函数一样。

有默认值,也可以不加默认值，或者是不加参数、多个参数都可行。

需要带括号，如果是没有变量的时候可不带括号。

例如：

//less.rounded-corners (@radius: 5px) {  width:100px;  height:30px;  margin-bottom:10px;  background-color: #ccc;  color:#333;  border-radius: @radius;  -webkit-border-radius: @radius;  -moz-border-radius: @radius;}.div1{  .rounded-corners();//.rounded-corners;}.div2{  .rounded-corners(10px);}

/* 生成的 CSS */.div1 {  width: 100px;  height: 30px;  margin-bottom: 10px;  background-color: #ccc;  color: #333;  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;}.div2 {  width: 100px;  height: 30px;  margin-bottom: 10px;  background-color: #ccc;  color: #333;  border-radius: 10px;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;}

3.7 匹配模式

匹配模式，即使同一个函数用不同的参数时调用不同的方法。例如写一个三角：

.triangleBase{  width:0;  height:0;  overflow:hidden;}.triangle(top,@w:5px,@c:#ccc){  .triangleBase;  border-width:@w;  border-color:@c transparent transparent transparent;  border-style:solid dashed dashed dashed;}.triangle(bottom,@w:5px,@c:#ccc){  .triangleBase;  border-width:@w;  border-color:transparent transparent @c transparent;  border-style: dashed dashed solid dashed;}.div1{  .triangle(top);}.div2{  .triangle(bottom);}

另一种写法，@_ 所有方法都调用：

.triangle(@_){  width:0;  height:0;  overflow:hidden;}.triangle(top,@w:5px,@c:#ccc){  border-width:@w;  border-color:@c transparent transparent transparent;  border-style:solid dashed dashed dashed;}.triangle(bottom,@w:5px,@c:#ccc){  border-width:@w;  border-color:transparent transparent @c transparent;  border-style: dashed dashed solid dashed;}.div1{  .triangle(top);}.div2{  .triangle(bottom);}

生成的css：

.div1 {  width: 0;  height: 0;  overflow: hidden;  border-width: 5px;  border-color: #cccccc transparent transparent transparent;  border-style: solid dashed dashed dashed;}.div2 {  width: 0;  height: 0;  overflow: hidden;  border-width: 5px;  border-color: transparent transparent #cccccc transparent;  border-style: dashed dashed solid dashed;}

3.8 其他

@arguments变量包含所有传递进来的参数。

//@argumentts变量.border(@w:30px,@c:red,@s:solid){  border:@arguments;}.test_arguments{  border();}

避免编译，有时候需要输出一些不正确的css语法或者使用一些Less不认识的专有语法，在前面加入~ 。

.test{  filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";}

.test{  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); }

!important关键字，会为所有混合所带来的样式，添加上!important

.test{  .border()!important;}

JavaScript 赋值，在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。

@string: `'hello'.toUpperCase()`; /* @string 变成 'HELLO' */    /* 你也可以使用前面提到的插值： */ @string: 'HELLO';  @var: ~`'@{string}'.topUpperCase()`; /* 变为 'HELLO' */    /* 获取文档的信息 */ @height = `document.body.clientHeight`;

@import，用@import导入css或者less文件，减少服务器资源请求

• less文件可以省略后缀名，同时可以在文件任意地方引入
• css文件需要加入后缀名

用@import时，Koala编译会让软件崩溃，用node吧！

3.9 总结

• 注释，可解析注释和不可解析的注释
• 变量用@定义，通过改变一个值改变多处样式
• 嵌套，符合dom结构
• 运算，加减乘除四则运算规律
• 继承，和js函数一样
• 匹配模式，类似函数参数
• @arguments 变量包含所有传递进来的参数、避免编译~、!important为所有样式加上!important
• color函数：lighten(@color,10%)，darken(@color,10%)
• 导入：@import：'style' less文件扩展名可选，@import:'style.css' 。减少服务器资源请求
• 字符串插入，字符串也可以用于变量中，然后通过@{name} 来调用

@base_url : 'http://www.t1.chei.com.cn/common';  background-image: url("@{base_url}/images/background.png");

4、Less和Sass的对比

相同点

• 两者都是css预编译
• 很多语法类似，思想一样

不同点

• Less环境以及使用方面比Sass简单
• 条件语句与控制，less不支持。Sass可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。
• koala输出格式，LESS：normal（正常）、compress（压缩）。而Sass提供4中输出选项：nested（正常缩进）、expanded（括号不单独占一行）、 compact（一个类一行显示）和compressed （压缩为一行）。
• less基于纯JavaScript，通过服务器端来处理的；Sass是基于Ruby的，在服务器端处理。

总结

​ 如果你是Ruby或HAML的粉丝，那么Sass会是你的好助手。对我来说，一个前端开发人员，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。对于新手来说更简单可用。

​ 对于刚接触的css预编译的前端，我推荐用Less。

5、参考文档

，其中还有对应的PPT，想要看PPT的可以私信或留言给我，我发给大家。