介绍
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护,提高开发效率。
但正因为它是预处理语言，因此不能直接被使用，需要进行编译后才可以。
less需要 nodejs支持。
安装： > npm install -g less
查看: > lessc
编译
命令编译：
> lessc aaa.less aaa.css
@charset "utf-8";
@bgColor:red; body{ background-color:@bgColor; }
html页面引入：
<link rel="stylesheet" href="index.css" type="text/css" />
或
<style type="text/css" >
@import url("index.css"); </style>
Koala外部编译器可编译Sass和Less文件：
安装地址：http://koala-app.com/index-zh.html
在内部将less文件放入到一个less文件夹下，同时建立css文件夹，则会自动将less文件转化为css文件。
因编译后的css，如果压缩，Output Style:Compress, 如果有问题不好跟踪，因此在设置中建立map地址映射（资源地图文件）。 》Setting -》Less -》Default Options -》Sourse Map.
这样就会在页面css跳出时，直接映射到less文件上。
Webstorm 内置编译器：
File-》Setting -》 Tools -》 File watcher -》 Add Less（添加Less）
注意：npm已经添加有less命令，同时 注意output路径中默认是编译到同级目录下，因此如果不同级注意 ../css/*****
语法：
- 注释
- 变量
- 混合（mixins）
- 模式匹配
- 颜色函数
- 嵌套
- 运算
变量
@charset "utf-8"; @bColor: green; @boderColor: red; @imgurl: "../img"; body{ background-color:@bColor; } div{ border: solid 1px @boderColor; } div{ background-image: url("@{imgurl}/01.png"); }
变量使用
》@变量名： 变量值； 在使用的地方 @变量名， 注意变量值应为css内容。
》@变量名： 拼接字符串； "@{变量名}拼接内容" 注意 要为{}括号
注释
// 单行注释，编译后不保留，因css本身不支持 //
/**/ 多行注释，编译后保留
混合
犹如js函数一般，将一部分css，包裹在一个函数中，在使用的地方直接调用即可。
.font(@color: #ffffff, @size: 14px){ font-size: @size; color: @color; } .error{ .font(#ff0000, 18px); } .normal{ .font(); }
混合定义： 》.混合(@参数名:默认参数值){****}
注意：必须以 点 开头， 混合中的参数为形参，可传可不传（依据是否有默认值决定），且不可以有引号，使用如同js方法一样使用即可。
模式匹配
模式匹配，如同js的switch一样， 当遇到相同的内容就走对应的代码段。以创建三角形为例。
.trangle(@_,@color,@size){ 0px; height: 0px; border:solid @size; border-color: transparent; } .trangle(right, @color, @size){ border-right-color: @color; } .trangle(left, @color, @size){ border-left-color: @color; } .trangle(top, @color, @size){ border-right-color: @color; } .trangle(bottom, @color, @size){ border-left-color: @color; } .trangle-l{ .trangle(left, #ff00ff, 18px); }
@_ 为通配符，相当于switch 中的 default,不论匹配哪个，此内容都会被执行，因此用于定义共通样式。
第一个参数为string的固定值，相当于case，当传入的内容匹配此内容时，会执行内部的内容。
注意：模式匹配要求定义的函数名称要求一致，且入参的内容要注意和模式的匹配要吻合。
颜色函数
颜色组成： 色相（spin-色轮），明度（dark-light），饱和度（saturate）
函数：
lighten(@color, @percent) //percent最高百分之50
darken(@color, @percent) //percent最高百分之50
spin(@color, @index) //index 表示色轮指定颜色的偏移量，适合颜色逐渐变化
saturate(@color, @percent) //饱和度提升百分比
desaturate(@color, @percent) //减饱和度
mix(@color1, @color2) //取颜色1和颜色2混合到一起形成的新颜色
/**ul{ list-style: none; li:nth-of-type(1){ background-color:darken(red, 0%); } li:nth-child(2){ background-color:darken(red, 10%); } li:nth-child(3){ background-color:darken(red, 20%); } li:nth-child(4){ background-color:darken(red, 30%); } li:nth-child(5){ background-color:darken(red, 50%); } } **/ ul{ list-style: none; li:nth-of-type(1){ background-color:lighten(red, 0%); } li:nth-child(2){ background-color:lighten(red, 10%); } li:nth-child(3){ background-color:lighten(red, 20%); } li:nth-child(4){ background-color:lighten(red, 30%); } li:nth-child(5){ background-color:lighten(red, 50%); } li:nth-child(6){ background-color:saturate(red, 100%); } li:nth-child(7){ background-color:desaturate(red, 50%); } li:nth-child(8){ background-color:spin(red, -20); } li:nth-child(9){ background-color:spin(red, 20); } li:nth-child(10){ background-color:mix(red, green); } }
注意：此处的nth-child也可支持（even，odd）做奇偶不同用。
ul{ list-style: none; li:nth-child(odd){ background-color:lighten(red, 20%); } li:nth-child(even){ background-color:darken(red, 20%); } }
嵌套：
将子或子子元素的样式以包含的形式被融入到父样式中类似
.a .b{****} => .a{ .b{}}
这样的好处是，可以将某一模块的所有样式统一在一起，不会那么零散。
注意：&表示父亲， 对邻居父子同级元素伪类 （+ ~ > :）都要使用&来表示。
.font-btn{ color: #9A9A9A; &:hover{ color: #926AA3; .icon{ background-color: rgba(146,106,163,.2); } } &:focus{ color: #480968; .icon{ background-color: rgba(146,106,163,.2); } } }
运算：
运算符分类： 加减乘除。用于角度，颜色，宽度，高度进行计算。
宽度高度
ul{ list-style: none; li{ background-color: @bgcommon; } li:nth-of-type(1){ @w1; background-color: @bgcommon + #990000; } li:nth-of-type(2){ @w2 + @w1; //注意最好带空格，变量之间运算可以不带空格，和数据计算要带空格 background-color: @bgcommon * 5; } li:nth-of-type(3){ @w1 + 500px; //注意要加空格 } }
// TODO