2、Less-混合

太过爱你忘了你带给我的痛 2021-12-20 04:07 294阅读 0赞

## 混合 ##

混合就是将一系列属性从一个规则引入到另一个规则中

1、普通混合

2、不带输出的混合

3、带参数的混合

4、但参数并且有默认值的混合

5、带多个参数的混合

6、命名参数

7、匹配模式

8、arguments变量

### 1、普通 混合（会将代码变异在css文件中） ###

此时大的div中嵌套了两个小的div

![1488757-20190528223612444-1158703696.png][]![1488757-20190528222729295-2096414081.png][]

此时的less文件中会出现重复的代码

将重复的代码提出来再进行引用

**此时的代码会编译到css文件中**

![1488757-20190528222947939-760103090.png][]![1488757-20190528223354175-494243338.png][]

### 2、不带输出的混合（不会编译到css文件中） ###

![1488757-20190528223452208-2096050547.png][]![1488757-20190528223504663-423458061.png][]

###  3、带参数的混合（） ###

此时再hunhe1()中添加相关的形参

![1488757-20190528224108190-2006245599.png][]![1488757-20190528224127134-1576994621.png][]

###  4、但参数并且有默认值的混合 ###

可以使用**@参数：默认值**

![1488757-20190528224717421-296921482.png][]![1488757-20190528224740490-327074772.png][]

###  5、带多个参数的混合 ###

同上

### 6、命名参数 ###

此时直接传入形参的值

![1488757-20190528225150976-927276369.png][]

### 7、匹配模式 ###

类似使用集成的框架

把所有的可以调用的进行抽取成为一个文件

引入文件使用使用相关的方法

如引入jQuery再使用其中的方法

![1488757-20190528232045944-958376002.png][]

公共类.less

.triangle(@_){
        width: 0;
        height: 0;
        overflow: hidden;
    }
    
    .triangle(L,@w,@c){
        border-width: @w;
        border-style: dashed solid  dashed dashed ;
        border-color: transparent @c transparent transparent;
    }
    .triangle(R,@w,@c){
        border-width: @w;
        border-style: dashed  dashed dashed solid;
        border-color: transparent transparent  transparent @c;
    }

此时定义三个同名的方法

第一个：使用**@\_**  调用其他的同名就会默认调用此

匹配模式.less

@import "匹配模式公共类.less";
    
    #warp > .inner{
        .triangle(R,@w:10px,@c:black);
    }

使用@import引入

![1488757-20190528232615090-2101468444.png][]![1488757-20190528232630965-297696064.png][]

### 8、arguments变量 ###

@arguments：代表多个变量

![1488757-20190528233902455-1556588335.png][]

![1488757-20190528233935499-435594865.png][]

转载于:https://www.cnblogs.com/Mrchengs/p/10941159.html

[1488757-20190528223612444-1158703696.png]: https://img2018.cnblogs.com/blog/1488757/201905/1488757-20190528223612444-1158703696.png
[1488757-20190528222729295-2096414081.png]: /images/20211220/45171e99dc8f4563801caa6f09537860.png
[1488757-20190528222947939-760103090.png]: https://img2018.cnblogs.com/blog/1488757/201905/1488757-20190528222947939-760103090.png
[1488757-20190528223354175-494243338.png]: /images/20211220/e24d944ac3394851bd0ba339de5224ac.png
[1488757-20190528223452208-2096050547.png]: https://img2018.cnblogs.com/blog/1488757/201905/1488757-20190528223452208-2096050547.png
[1488757-20190528223504663-423458061.png]: /images/20211220/c573775bd49c4f5c8e2aa43e1ede1312.png
[1488757-20190528224108190-2006245599.png]: https://img2018.cnblogs.com/blog/1488757/201905/1488757-20190528224108190-2006245599.png
[1488757-20190528224127134-1576994621.png]: /images/20211220/1d6c4f1d77ad45a2b4e57b94af6ad22d.png
[1488757-20190528224717421-296921482.png]: https://img2018.cnblogs.com/blog/1488757/201905/1488757-20190528224717421-296921482.png
[1488757-20190528224740490-327074772.png]: /images/20211220/f221a668860041279f6d78fbecc8d401.png
[1488757-20190528225150976-927276369.png]: /images/20211220/4b63469cce7b4e4999d43f6421bcf81d.png
[1488757-20190528232045944-958376002.png]: /images/20211220/d877129f497d4e88b25dd70d89d9ec9b.png
[1488757-20190528232615090-2101468444.png]: https://img2018.cnblogs.com/blog/1488757/201905/1488757-20190528232615090-2101468444.png
[1488757-20190528232630965-297696064.png]: /images/20211220/b1aa898485584fa694e31653bbd2ccfb.png
[1488757-20190528233902455-1556588335.png]: /images/20211220/22bc8b532c494542b5b2bcc697d7a882.png
[1488757-20190528233935499-435594865.png]: /images/20211220/be79834e1f264db9b78333b925af5092.png