前端的学习之路：初级CSS---less中的变量

less中的变量

.box1{
    background-color: aqua;

    .box2{
        background-color: red;

        .box4{
            color: yellowgreen;
        }
    }
    .box3{
        background-color: yellow;
    }
}
// 这里表示box2 和box3都是box1的后代，这两者是兄弟
// 同样box4是box2的后代
//less中的单行注释，这是的内容不会被解析到css中
/*
css的注释，内容会被解析到css文件中
*/

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

.box5{
    // 使用变量时，如果值直接使用则以 @变量名 的形式使用即可
    width: @a;
    color: @b;
}
// 作为类名一部分其他值时必须以 @{变量名} 的形式使用
[email protected]{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

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

div{
    @d:115px;
    //变量发生重名时使用 就近原则 
    width:@d;
    height:@e ;
}
// 可以在变量声明前就使用变量
@e:335px;


div{
    width: 200px;
    height: $width;
}