Less

1. 值变量

用@符号表示一个变量

@color: #e58936;
div{
    color: @color;
}

2. 选择器变量

同样是用@符号表示一个变量，但是作为选择器时要用{}包裹

@con: container;
@conId: #container;
@conClass: .container;
.@{con}{
    color: red;
}
@{conId}{
    color: blue;
}
@{conClass}{
    color: green;
}

3. 属性变量

跟选择器变量用法相同(用@符号表示一个变量，用{}包裹)

@c: color;
.container{
    @{c}: #dedded;
}

4. url变量

定义时要用引号包裹

@url: './images'
.container{
    background: url('@{url}/01.png');
}

5. 声明规则集(作用类似于混入)

声明：@变量名: {键名: 值;}
使用：@变量名();

@background:{
    background-color: red;
}
.container{
    @background();
}

6. 变量的作用域

就近原则

// 因为就近原则的关系，这里@w采用的是10%。
@var: @w;
@w: 100%;
.container{
    width: @var;
    @w: 10%;
}

7. 嵌套

&符号：表示父级选择器

.container{
    position: relative;
    &::after{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        background-color: green;
    }
}

8. 混入(Mixin)

混入就是将一个css类包含入另一个css类中去

1. 无参数混入

.backgound{
    background-color: green;
}
.container{
    .backgound; // 或者.backgound() 两种写法
}

2. 不输出Mixin(只创建一个Mixin，不进行单独输出)

.backgound(){
    background-color: green;
}
.container{
    .backgound();
}

3. 有参数混入

   注意 1.默认参数 2.命名参数 3.arguments 4.rest

.container(@color, @bgColor){
    background-color: @bgColor;
    color: @color;
}
.container{
    .container(#999, #fff);
}

4. 匹配模式

   和面向对象的多态相似，在传参中进行参数匹配，找到匹配度最高的，如果匹配程度相同，则全部选择，并且有样式覆盖

.container(@bgColor){
    background-color: @bgColor;
}
.container(@bgColor, @color:red){
    background-color: @bgColor;
    color: @color;
}
.container(@bgColor, @color: #fff, @padding){
    background-color: @bgColor;
    color: @color;
    padding: @padding;
}

.container{
    .container(#000);  //这里应用的是第二个，因为第二个有默认参数，达到最大匹配
}

5. 方法的命名空间

   不能单独使用方法，必须先进行命名空间的引入，才能使用里面的方法

.wrap(){
    .container(@color){
        color: @color;
    }
}

.container{
    //.container(blue);  这种写法是错误的，因为没有引用命名空间
    .wrap .container(blue);
}

9.

10.