# less
### less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，
增加了变量、Mixin、函数等特性，使用css更易维护和扩展
less既可以在客户端上运行，也可以借助Node.js在服务端运行
### less编译工具
koala 官网: www.koala-app.com
### less中的注释
以//开头的注释，不会编译到css文件中
以/**/包裹的注释会编译到css文件中
### less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用:直接使用@pink
2.作为选择器和属性名:#@{select的值}的形式
3.作为url:@{url}
4.变量的延迟加载
### less中的嵌套规则
1.基本的嵌套规则
2.&的使用
### less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
定义 .zlp{
}
调用 .zlp
2.不带输出的混合
定义 .zlp(){
}
调用 .zlp
3.带参数的混合
@w : 宽度变量
@h : 高度变量
@c : 颜色变量
定义 .zlp(@w,@h,@c){
}
执行 .zlp(100px,100px,pink)
4.带参数并且有默认值的混合
定义 .zlp(@w:10px){
width:@w;
}
执行 .zlp(){} 默认 whidth:10px
5.带多个参数的混合
定义 .zlp(@w:10px,@h:10px,@c:color){
width:@w;
height:@h;
color:@c;
}
执行 .zlp(){} 默认 whidth:10px height:10px color:pink
6.命名参数
定义: .zlp(@w:10px,@h:10px,@c:red){
width:@w;
height:@h;
color:@c;
}
我只想传一个color颜色
执行: .zlp(@c:pink)
7.匹配模式
定义:
.zlp(@_){
width:0;
height:0;
overflow:hidden;
}
.zlp(L,@w,@c){
border-withd:@w;
border-style:dashed dashed dashed soild;
border-color:transpaprent transpaprent transpaprent @c;
}
.zlp(R,@w,@c){
border-withd:@w;
border-style:dashed dashed dashed soild;
border-color:transpaprent transpaprent transpaprent @c;
}
.zlp(T,@w,@c){
border-withd:@w;
border-style:dashed dashed dashed soild;
border-color:transpaprent transpaprent transpaprent @c;
}
.zlp(B,@w,@c){
border-withd:@w;
border-style:dashed dashed dashed soild;
border-color:transpaprent transpaprent transpaprent @c;
}
执行: .zlp(R,100px,pink)
自动默认匹配上第二个.zlp
定义一个同名的混合 参数填写 @_ 来解决重复的定义
8.arguments变量
定义 .zlp(@1,@2,@3){
border:@arguments;
}
.zlp(1px solid red)
### less运算
.zlp(){
width:(100 + 100px)
}
### less复习
变量
@
变量的延迟加载
变量是块级作用域
嵌套
&:平级
混合
什么是混合？
将一系列规则集引入另一个规则集中(ctrl c + ctrl v)
混合的定义在less规则有明确定义，使用.的形式来定义
普通混合(编译到原生css中的)
不带输出的混合(加双括号)
带参数的混合
带默认值的混合
匹配模式
arguments
计算
加减乘除 计算的一方带单位就可以
继承
.juzhong{
width:100px;
}
.zlp{
.inner{
&:extend(.juzhong)
}
}
形成：
.zlp .inner,.juzhong {
width:100px;
}
&.extend(.juzhong all)
加上all 就是 .juzhong 里所有的副属性都带上
### 避免编译
~"xxx"
写在xxx里的代码是避免编译的
