html:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <link rel="stylesheet" href="../css/reset.css">
    9.     <link rel="stylesheet" href="../less/127less的变量.css">
    10. </head>
    11. <body>
    12.     <div class="box1">
    13.         <div class="box2">
    14.             aaa
    15.             <div class="box3"></div>
    16.         </div>
    17.     </div>
    18. </body>
    19. </html>

    less:
    （1）文件名后缀为.less,通过easy less转换为css.使用@变量名:变量值；来定义变量
    （2）可以在多个嵌套中直接在父类元素里面，直接写子类元素的样式，使用@变量名使用；
    （3）在变量名为元素名或者路径名时，使用@{变量名}才能使用
    （4）// less中的单行注释，注释中的内容不会波解析到ess中
    （5）对于已经表明的的值，如width: 300px; 可以使用fontsize:$符号+width;来直接使用300px这个值
    */
    css中的注释，内容会被解析到css文件中
    //变量，在变量中可以存储一个任意的值
    1并且我们可以在需要时，任意的修改变量中的值
    //变量的语法:
    @变量名
    //变量发生重名时，会优先使用比较近的变量
    //可以在变量声明前就使用变量
    image.png

    @c:#bfa;
@w:200px;
@lj:box6;

.box1 {
    background-color: @c;
    width:@w;
    height: @w;
    .box2 {
        color:@c;
        font-size: 20px;
        width: @w;
        height: @w;
        .box3 {
            border: 1px solid black;
            width: @w;
            height: 300;
            font-size: $height;
        }
    }
}

.@{lj} {
    background-color: @c;
    width: @w;
    height: @w;
    background-image: url('@{lj}/url');
}