less——css预处理器
引入
<link rel="stylesheet" href="lib/honeySwitch.css">
<link rel="stylesheet/less" href="lib/honeySwitch.less">
// css名改less<script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js"></script>
// 引这句代码(写在head里)
引用
在一个less里引用另一个less@import "./lib/comp.less"
编译
编译转换:less ==> css
编译工具--koala:http://koala-app.com/
定义变量 @
@colorp:pink;
@colorb:blue; //定义样式
@m: margin; //定义属性(一般不用)
@selector: .btn //定义选择器(一般不用)
* {
@{m}: 0; 属性和选择器在写的时候要加上 {} ,而样式不用
padding: 0;
}
@{selector} {
backgroundColor:@colorp;
border: 1px solid @colorb;
}
延迟加载,作用域
- 作用域:一个 { } 里算一个作用域
- 延迟加载:等作用域里的所有变量加载完,再执行其他操作
@var: #1111111;
div {
@var: #333333;
color: @var; 由于延迟加载,这里的color: #666666
@var: #666666
}
backgrundColor: @var 由于作用域的原因,这里是backgroundColor: #111111
嵌套规则,&
- less与css的区别之一就是less可以嵌套写
- &符号是指当前元素
.div1{
width: 300px;
height: 300px;
.div2{
width:50px;
height:50px;
backgroundColor: blue;
&: hover { 这里的&: hover 既 div2: hover
backgroundColor: red;
}
}
}
混合 —— 以 . 开头,并且有 ( )
定义混合(以 . 开头):
.beijing(@w:10px,@h:10px,@bgc: pink){ 带参混合(参数间用逗号隔开)。
width: @w; 设定默认值10,10,pink(若不设定默认值,
height: @h; 下面引用时少输入一个参数, 就会报错,
bacjgroundColor: @bgc; 如只输入10px,purple)
}
调用:
.div1{
.beijing(100px,100px,blue); 所有参数均输入===100px,100px,blue
}
.div2{
.beijing(); 未输入参数,则直接调用默认值===10px,10px,pink
}
.div3{
.beijing(@bgc: red); 指定输入参数(既命名参数),则其他未输入
} 的为默认值===10px,10px,red
匹配模式(例子:画一个三角形)
定义混合:
.triangle(@_,@w,@c){ 这里是公用代码。 @_ 是匹配符的意思,既在调用相同名字的代码时,
width: 0; 带匹配符的就算没调用也没关系,系统会默认调用。
height: 0; 所以:1相同名字(如这里的triangle),2匹配符,
overflow: hidden; 3公用代码,三者组成公用样式
}
.triangle(T,@w,@c){ T,R,B,L===标识符(less语法之一)
border-width: @w;
border-style: solid;
border-color: @c transparent transparent transparent
}
.triangle(R,@w,@c){
border-width: @w;
border-style: solid;
border-color: transparent @c transparent transparent
}
.triangle(B,@w,@c){
border-width: @w;
border-style: solid;
border-color: transparent transparent @c transparent
}
.triangle(L,@w,@c){
border-width: @w;
border-style: solid;
border-color: transparent transparent transparent @c
}
调用:
.sanjiaoxing1{
.triangle(R,40px,blue);
}
.sanjiaoxing2{
//.triangle(); 此处可以省略不调用,用上面说的@_匹配符可以解决问题
.triangle(B,50px,purple);
}
继承
性能比混合高,灵活度比混合低
避免编译
符号 ~" "
~" 这里是需要避免编译的代码 "