less需要编译成css运行,
①这种写法,一旦行数多起来,看起来不明晰
.box1{
}
.box1 .box2{
}
使用less 简写为嵌套形式:
.box1{
.box2{
}
}
如果要添加 :hover 的话,需要在前面添加 &
.box1{
.box2{
&:hover{
}
}
}
②可以使用 @变量名 代替 value值
@color:pink;
.box1{
color: @color;
}
用 @代替 属性名 的话,需要 使用 @{ 属性 } 来显示
@mar:margin;
.box1{
@{mar}: 0 auto;
}
变量具有延迟加载,等到作用域内执行完毕,才赋值,下面的 width 的值为 2px;
@var:0;
.box1{
@var: 1px;
width: @var;
@var: 2px;
}
上面的 @var 代表的是 属性值,而不是属性名, 所以不使用 @{ } , 这里box1只设了一个属性值 width
.box1{
width: 3px;
}
③ 混合 mix in , 抽离出共同代码,@变量名 表示形参,和函数一个思想:
不带参数:
可以写 .hunhe , 但解析成css时会被保留
.hunhe{
width: 10px;
height: 10px;
}
.box1{
.hunhe;
}
.box2{
.hunhe;
}
写 .hunhe() 解析成css时就不会保留它
.hunhe(){
width: 10px;
height: 10px;
}
.box1{
.hunhe;
}
.box2{
.hunhe;
}
带参数:
.hunhe(@w,@h){
width: @w;
height: @h;
}
.box1{
.hunhe(10px,10px);
}
.box2{
.hunhe(20px,20px);
}
参数可以带默认值, 使用冒号 :
.hunhe(@w:10px,@h:10px){
width: @w;
height: @h;
}
.box1{
.hunhe(10px,10px);
}
.box2{
.hunhe(20px,20px);
}
④ @arguments 视频里一句:还不如直接写呢,笑喷ヾ(◍°∇°◍)ノ゙
原先是这样:每个参数都要写一遍
.hunhe(@width,@style,@color){
border: @width,@style,@color;
}
.box1{
.hunhe(1px,solid,black);
}
用 @arguments 可以直接代替要输入的参数:
.hunhe(@width,@style,@color){
border: @arguments;
}
.box1{
.hunhe(1px,solid,black);
}
避免编译: ~" " 波浪号和双引号
可以直接计算, 只需一个带单位就好
.box1{
width: 100 + 100px;
}
⑤ 继承
例如现在 .box1有属性 width,height,color
.box1{
width: 100px;
height: 100px;
color: red;
}
.box2 想要继承这三个属性可以使用 :extend(.box1)
.box2:extend(.box1){
}
也可以使用这种写法 &:extend(.box1)
.box2{
&:extend(.box1);
}
假如 .box2:hover{ width: 200px; } 要继承 .box2 的 :hover的属性,那就使用 &:extend(.box1 all)