less语法

注释

1. 在.less文件中展示，但是不显示到编译后的.css文件中

   // 这个注释不会显示到.css文件中

1. 在.less文件中展示，编译后展示到.css文件中

   /* 这个注释编译后，会在css文件中以双斜杠方式展示 */

变量

1. 使用 @变量名:变量值 来声明一个变量；
2. 作为普通属性使用时，直接使用 @变量名 来调用；
3. 作为选择器或者属性名，使用 @{变量名} 来调用；
4. 作为URL，使用 @{变量名} 来调用；
5. 变量存在作用域，不同层级的 {} 中定义的变量的作用域不同
6. 变量延迟加载

变量定义/调用示例：

// 定义普通变量
@width: 300px;
// 定义属性名变量
@positionAttr: position;
// 定义选择器变量(带井号)
@wrapSelector: #wrap;
// 定义选择器变量(不带点符号)
@innerSelector: inner;
// 调用选择器变量(带井号)
@{wrapSelector} {
    // 调用属性名变量
    @{positionAttr}: relative;
    // 调用普通变量
    width: @width;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    // 调用选择器变量(不带点符号)
    .@{innerSelector} {
        @{positionAttr}: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: pink;
        height: 100px;
        width: 100px;
    }
}

延迟加载示例：test.less

@var: 0;
.class {
    @var: 1;
    .brass {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

编译后的：test.css

.class {
    /* 取less中的对应作用域里面的@var */
  one: 1;
}
.class .brass {
    /* 取.brass中的@var，因为变量延迟加载，取@var的最后一次赋的值 */
  three: 3;
}

嵌套

1. 基本嵌套

   #wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background: pink;
        height: 100px;
        width: 100px;
    }
   }

编译后css:

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
}
#wrap .inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: pink;
    height: 100px;
    width: 100px;
}

1. &嵌套
   错误 的绑定hover事件

   // 错误的绑定hover事件
   #wrap {
    .inner {
        background: pink;
        :hover {
            background: deeppink;
        }
    }
   }

编译后hover和inner中间带了空格

#wrap .inner {
  background: pink;
}
/* .inner和:hover之间错误的多了个空格 */
#wrap .inner :hover {
  background: deeppink;
}

正确 的绑定hover事件

// 正确的绑定hover事件
#wrap {
    .inner {
        background: pink;
        /* 加&时,编译后的层级不会再有空格 */
        &:hover {
            background: deeppink;
        }
    }
}

编译后的css文件

#wrap .inner {
  background: pink;
}
#wrap .inner:hover {
  background: deeppink;
}

混合

混合就是将一个规则集引入到另一个规则集

1. 普通混合 ```less // 使用点新建混合 .innerCommon{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: pink; height: 100px; width: 100px; }

wrap {

position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner1 {
    /* 引入.innerCommon规则样式 */
    .innerCommon;
}
.inner2 {
    /* 引入.innerCommon规则样式 */
    .innerCommon;
}

}

2. 
不带输出的混合
<br />普通混合时，.innerCommon规则也会输出到css文件。加括号之后便不会输出到css文件
```less
// 带括号之后，.innerCommon不会被编译到.css文件
.innerCommon(){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: pink;
    height: 100px;
    width: 100px;
}
#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner1 {
        /* 引入.innerCommon规则样式 */
        .innerCommon;
    }
    .inner2 {
        /* 引入.innerCommon规则样式 */
        .innerCommon;
    }
}

1. 带参数的混合 ```less // 给innerCommon混合定义@w, @h两个参数 .innerCommon(@w, @h){ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: pink; height: @w; width: @h; }

wrap {

position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner1 {
    // 传入长宽参数,引入innerCommon混合
    .innerCommon(100px, 100px);
}
.inner2 {
     // 传入长宽参数,引入innerCommon混合
    .innerCommon(100px, 100px);
}

}

4. 
参数带默认值的混合
```less
// 使用冒号为变量设置默认值
.innerCommon(@w:100px, @h:100px, @c:pink){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: @c;
    height: @w;
    width: @h;
}
#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner1 {
        // 带默认值的混合调用时，可以从前向后省略参数值
        .innerCommon(100px, 100px);
    }
    .inner2 {
        // 可以指定设置参数@c的值为deeppink
        .innerCommon(@c:deeppink);
    }
}

1. 匹配模式

   类似于重载

示例：绘制三角形库triangle.less

// 调用任意.triangle(变量值, @w, @c)时，都会调用.triangle(@_, @w, @c)
.triangle(@_, @w, @c) {
    width: 0px;
    height: 0px;
    overflow: hidden;
}
// 使用.triangle(L,变量值,变量值)调用该混合
.triangle(L, @w, @c) {
    border-width: @w;
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @c;
}
.triangle(R, @w, @c) {
    border-width: @w;
    border-style: dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}
.triangle(T, @w, @c) {
    border-width: @w;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @c transparent;
}
.triangle(B, @w, @c) {
    border-width: @w;
    border-style: solid dashed dashed dashed;
    border-color: @c transparent transparent transparent;
}

在需要绘制三角形的less中引入该less：

@import "./triangle.less";
#wrap .sjx {
    // 调用.triangle(B, @w, @c)混合，会自动先调用.triangle(@_, @w, @c)混合
    .triangle(B, 100px, orange)
}

1. @arguments的使用 ```less .borderStyle(@w, @style, @c) { // 使用@arguments获取所有传入的参数 border: @arguments; }

wrap {

.inner {
    .borderStyle(1px, solid, black);
}

}

<br />编译后css：
```css
#wrap .inner {
  border: 1px solid black;
}

计算

计算中只需一个参数带单位

#wrap {
    width: (100 + 100px);
}

编译后的css：

#wrap {
  width: 200px;
}

继承

1. 普通继承
   编写被继承less：extends.less

   // 被继承的混合不能带参数，不能加括号
   .publicStyle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
   }

在另一个less文件中引入extends.less，并继承.publicStyle

@import "./extends.less";
* {
    margin: 0;
    padding: 0;
}
#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    // 使用extend函数进行继承
    .inner:extend(.publicStyle) {
        &:nth-child(1){
            width: 100px;
            height: 100px;
            background: red;
        }
        &:nth-child(2) {
            width: 50px;
            height: 50px;
            background: pink;
        }
    }
}

也可以使用&进行继承

@import "./extends.less";
* {
    margin: 0;
    padding: 0;
}
#wrap {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    // 使用extend函数进行继承
    .inner{
        &:extend(.publicStyle);
        &:nth-child(1){
            width: 100px;
            height: 100px;
            background: red;
        }
        &:nth-child(2) {
            width: 50px;
            height: 50px;
            background: pink;
        }
    }
}

1. 继承混合，并继承混合的绑定事件 ```less .publicStyle { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; }

.publicStyle:hover { background: black; }

<br />使用extend(publicStyleall)继承.publicStyle并继承其绑定的事件
```less
#wrap {
    .inner {
        &:extend(.publicStyle all);
}