嵌套与变量
less中
@color:pink;
@m:margin;
@selector:#wrap;//变量定义，属性，值，选择器都可定义
@{selector}
{
width: 200px;
height: 200px;
border: 3px solid blue;
@{m}:auto;
.inner{ //嵌套 效果相当于 #wrap .inner
width: 100px;
height: 100px;
background-color: @color;
}
}
相当于css的
#wrap {
width: 200px;
height: 200px;
border: 3px solid blue;
margin: auto;
}
#wrap .inner {
width: 100px;
height: 100px;
background-color: pink;
}
变量的块级作用域
@var:0;
.class{
@var:1;
.brass{
@var:2;
tree:@var;
@var:3;
}
grass:@var;
}
- 引用变量会从最近的作用域找起，且取得最近的作用域内最后此定义，因而tree的值为3。
- 值得注意的是，.class括号中的brass括号对变量修改并不会作用域.class，故grass值为1。
编译后
.class {
grass: 1;
}
.class .brass {
tree: 3;
}
嵌套规则
.inner {
width: 100px;
height: 100px;
background-color: pink;
&:hover{
background-color: yellow;
}
}
嵌套伪类时，应在伪类前加"&",否则会出现空格使伪类无效。
此方法可用于平级嵌套，例如div.app
定义混合
.FenBeiJing() //去掉括号后会把它(构造函数)也编译
{
background-color: pink;
}
#wrap{
.FenBeiJing;
width: 200px;
height: 200px;
.inner{
width: 100px;
height: 100px;
.FenBeiJing;
}
}
-
可通过这样的写法像函数一样，定义并调用一串css代码。
-
既然像函数就也可以带参数，参数也可以有默认值。
.FenBeiJing(@w:pink){
background-color: @w;
}
这样引用时没有传参数就会默认为粉色。引用传参如下
.FenBeiJing(black);
注意：当传的参数数量没有达到预设的数量，且没有传的参数又没有预设值，是会报错编译失败的。
想指定传的参数对应哪一个时：
.FenBeiJing(@w:black);
匹配模式
.BeiJing(Fen){
background-color: pink;
}
.BeiJing(Hei){
background-color:black;
}
#wrap{
.BeiJing(Fen);
.inner{
.BeiJing(Hei);
}
}
- 函数没有用@开头也没有值的参数会被用于在相同名字的函数中选择匹配,引用时根据这种值选择要当前函数名下的哪一个混合。
编译后如下
#wrap { background-color: pink; } #wrap .inner { background-color: black; }
注意相同函数名下没有匹配值的函数会被直接一起调用
arguments
这样用
.border(@1,@2,@3){
border: @arguments;
}
.inner{
.border(1px,s0lod,black)//数量要对上
}
引用
@import “less文件地址”；
less计算
width:(100+100px);//一方带单位即可
less继承
避免编译
想要一段代码不被less编译，用~" "套住内容即可
height: ~"(100+100px)";
个人测试只能套值，而不能用于属性