给多个子元素设置
less代码:
.box1{
background-color: #bfa;
.box2{
background-color: #ff0;
}
.box3{
background-color: #0ff;
}
}
对应的css代码:
.box1 {
background-color: #bfa;
}
.box1 .box2 {
background-color: #ff0;
}
.box1 .box3 {
background-color: #0ff;
}
注释
less以下支持两种注释,但第一种注释不会被解析到css中。
//less中的单行注释,注释中的内容不会被解析到css中
/*
css中的注释,内容会被解析到css文件中
*/
变量
语法:@变量名
less代码:
@a:100px;
.box1{
width: @a;
height:@a;
}
对应的css代码:
.box1 {
width: 100px;
height: 100px;
}
变量还可以作为颜色、类名等。类名的使用比较特殊,如下:
less代码:
@a:100px;
@b:box1;
.@{b}{
width: @a;
height:@a;
}
对应css代码:
.box1 {
width: 100px;
height: 100px;
}
变量还可以作为路径的一部分,这是得更加注意,不仅要大括号,还要在路径外面加引号。
less代码:
@a:100px;
@b:box1;
@c:im;
.@{b}{
width: @a;
height:@a;
background-image: url("@{c}/01.jpg");
}
对应的css代码:
.box1 {
width: 100px;
height: 100px;
background-image: url("im/01.jpg");
}
作用域和重新赋值
视频说变量是就近原则,我感觉不大对,按之前学的c++和python,不是这样的。
less代码:
@a:100px;
@a:110px;
.box1{
@a:200px;
width: @a;
height:@a;
}
.box2{
width: @a;
height:@a;
}
css代码:
.box1 {
width: 200px;
height: 200px;
}
.box2 {
width: 110px;
height: 110px;
}
从这里可以看到,box1中我有一个变量a,所以box1内部使用的a都是用的自己内部的这个a,也就是200px。这里跟其他编程类似,用的是局部变量,外边的全局变量被屏蔽了。
box2中的a用的是110,而不是100,因为110的赋值在100的赋值下面,也就相当于重新赋值了。而且box2使用的a不会是box1里200,因为box1里的a是局部变量,只能在box1内部使用,不会影响带box1外面。(这里是我自己试出来的,如果解释不对,评论区纠正一下。)
$符
可以将属性名用作变量。
less代码:
.box1{
width: 100px;
height:$width;
}
css代码:
.box1 {
width: 100px;
height: 100px;
}