less官网

• 变量：在变量中可以存储任意值，
  • 语法：@变量名
  • & 表示外层的父元素 &：hover{ }
  • :extend() 对当前选择器扩展指定选择器的样式
  • 直接对指定的样式进行引用，这里相当于将p1的样式进行复制，mixin 混合

.box3{
    width: 200px;
    height: 200px;
} 
.box1{
    //mixin 混合
    .box3();
}
.box2(){
    //使用类选择器可以在选择器后边添加一个括号，可以创建一个mixins
    width: 100px;
    height: 100px;          
}
.test(@w:10px,@h:30px,@bg-color:red){
    //混合函数 在混合函数中可以直接设置变量
    width: @w;
    height: @h;
    border:1px solid @bg-color;
}
div{
//调用混合函数，按顺序传递参数
.test(300px);
.test(@bg-color:red,@h:100px,@w:200px);
}
@import "syntaxt2.less"; 导入模块  可直接进行运算
@a:200px;
@b:blue;
@c:box1;
.box1{
    //使用变量时，直接用@变量名 的形式使用
    width: @a;
    color:@b;
    //变量重名时，优先使用比较近的变量
    @a:300px;
}
//可以在变量声明前就使用变量
@e:200px;
//作为类名
.@{c}{
    width: @a;
    background-image:url("@{c}/1.png")
}