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

/*
    CSS中的注释（多行注释），内容会被解析到CSS文件中
*/
.box1{
    background-color: #bfa;
    .box2{
        background-color: #ff0;
        .box4{
            color: red;
        }
    }
    .box3{
        background-color: orange;
    }
}

//变量，在变量中可以存储一个任意的值
//并且我们可以在需要时，任意地修改变量中的值
//变量的语法   @变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
    //使用变量，如果是直接使用则以 @变量名 的形式使用即可
    width: @a;
    color: @b;
}

.@{c}{
    //作为类名或者一部分值使用时，必须以 @{变量名} 的形式使用
    width: @a;
    background-image: url("@{c}/1.png");
}
@d:200px;
@d:300px;
div{
    //变量发生重名时，变量值为最后一次赋值的内容
    //变量有作用域，声明块中定义的变量在外面没法用
    @d:115px;
    width: @d;
    height: @e;
}


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

div{
    width: 300px;
    // height: $width;即height: 300px;
    height: $width;
}