127_less中的变量

less源文件：

// less中的单行注释，注释中的内容不会被解析到css中

/*
css中的注释，内容会被解析到css文件中
*/

.box1 {
    background-color: #bfa;

    .box2 {
        background-color: #ff0;

        .box4 {
            color: red;
        }
    }

    .box3 {
        background-color: orange;
    }
}

// 变量，在变量中可以存储一个任意的值
// 并且我们可以在需要时，任意的修改变量中的值
// 变量的语法：@变量名
@a: 200px;
@b: #bfa;
@c: box6;

.box5 {
    // 使用变量时，如果是直接使用，则以 @变量名 的形式使用即可
    width: @a;
    color: @b;
}

// 作为类名，或者一部分值使用时必须以 @{变量名} 的形式使用
.@{c} {
    width: @a;
    background-image: url("@{c}/1.png");
}

@d: 200px;
@d: 300px;

div {
    // 变量发生重名时，会优先使用比较近的变量，因为less里的变量都是块级作用域
    @d: 115px;
    width: @d;
    height: @e;
}

// 可以在变量声明前就使用变量
@e: 335px;

div {
    width: 300px;
    // 新版的语法
    // height: $width;
}

less被编译后，css源文件：

/*
css中的注释，内容会被解析到css文件中
*/
.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  color: red;
}
.box1 .box3 {
  background-color: orange;
}
.box5 {
  width: 200px;
  color: #bfa;
}
.box6 {
  width: 200px;
  background-image: url("box6/1.png");
}
div {
  width: 115px;
  height: 335px;
}
div {
  width: 300px;
}
/*# sourceMappingURL=./index.css.map */