码迷,mamicode.com
首页 > 其他好文 > 详细

2、Less-混合

时间:2019-05-28 23:59:57      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:nts   http   war   str   公共类   一个   imp   命名参数   使用   

混合

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

1、普通混合

2、不带输出的混合

3、带参数的混合

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

5、带多个参数的混合

6、命名参数

7、匹配模式

8、arguments变量

 

1、普通 混合(会将代码变异在css文件中)

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

技术图片技术图片

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

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

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

技术图片技术图片

 

2、不带输出的混合(不会编译到css文件中)

技术图片技术图片

 

 3、带参数的混合()

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

 技术图片技术图片

 

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

 可以使用@参数:默认值

技术图片技术图片

 

 5、带多个参数的混合

 同上

 

6、命名参数

此时直接传入形参的值

 技术图片

 

7、匹配模式

类似使用集成的框架

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

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

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

技术图片

 

公共类.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引入

技术图片技术图片

 

8、arguments变量

@arguments:代表多个变量

 技术图片

技术图片

 

2、Less-混合

标签:nts   http   war   str   公共类   一个   imp   命名参数   使用   

原文地址:https://www.cnblogs.com/Mrchengs/p/10941159.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!