less学习

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);
}