前端学习笔记87-less中的变量

给多个子元素设置

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;
}