less学习笔记

时间:2021-05-04 16:18:20

less is more , than css

less使用到的编译工具: koala

less使用的软件: sublime text(推荐使用)

在less 中注释使用的是//     ( /**/是会被编译的)

less中变量的声明使用: @

如:

@w : 20px; @h : 50px;

 调用 :

.box{ width : @w;  height : @h; }

  混合:

border{
border : 1px solid red;
box_2 { .box; //调用上面的box
margin : 0 auto;
}

混合-可带参数:

border_02(@b_w){
border : @b_w solid red;
} //调用
text_maix{
border_02(20px);
}

混合-可带参数默认值:

border_03(@b_w : 10){
border : @b_w solid red;
}

匹配模式:相当于js中的if(未插入代码)

运算: 可以进行加减乘除的运算(未插入代码)

嵌套:尽量减少嵌套的层数。如以下的a要嵌套在哪里,是在ul下还是在li下,需要做一定的考量,标准是:尽量禁烧嵌套的层数。

&表示上一层选择器。如下代码,它表示的是 a

ul{
width : 500px; li{ margin :; } a{ color : red;
& :hover{ color : green;}
}
}

@argument 传入的参数太多,在使用时不想写那么多的参数,只需一个@argument即可,这样既可以省事也可以减少不必要的错误。

border_arg(@w: 20px, @c : red, @x : solid){
border: @argument;
}

避免编译: 有些内容不应该由这个软件编译掉就可以用  “~”表示该段内容不要编译

text_03{
width : ~"clc(300px-20px)";
}

!important (一般不推荐使用,容易造成问题)

text_important{
border_radius() !important;
}