less简介
less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，增加了变量、Minxin、函数等特性，使CSS更易维护和扩展
less既可以在客户端上运行，也可以借助Node.js在服务器端运行
less的中文官网：http://lesscss.cn/
less的编译工具koala下载：https://pan.baidu.com/s/1YF8w7eU5grCLMY8DkzccGw 密码：4bi3
less中的注释
//开头的注释不会被编译到css文件中
以/**/包裹的注释会编译到css文件中
less中的变量
使用@来声明一个变量：@boxColor:pink
less的嵌套规则
1、基本的嵌套规则
2、&的使用
如： &:hover { background: aqua; }加了&后就不会将后面的内容当做下一层去编译 less的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1、普通混合
定义：.s{...}
引用：.s
缺点：.s的内容在编译后再css文件中显示
2、不带输出的混合
定义：.s(){...}
引用：.s()
缺点：.s的内容在编译后再css文件中显示
3、带参数的混合
定义：.s(@w){...}
引用：.s(100px)
4、带参数且有默认值的混合
定义：.s(@w,@h:100px){...}
引用：.s(100px,200px)
5、命名参数
定义：.s(@w,@h){...}
引用：.s(@w:100px,@h:200px)
6、匹配模式
定义：.s(@_,@h){...} .s(@w,@h){...}
引用：.s(@w:100px,@h:200px)
效果：除了执行.s(@w,@h)，还会执行.s(@_,@h){...}
less运算
在less中可以进行加减乘除的运算
less继承
性能比混合高，灵活度较差
/* Less */ .animation{ transition: all .3s ease-out; .hide{ transform:scale(0); } } #main{ &:extend(.animation); } #con{ &:extend(.animation .hide); } /* 生成后的 CSS */ .animation,#main{ transition: all .3s ease-out; } .animation .hide , #con{ transform:scale(0); }