LESS详解之混合(Mixins)中级

左手的ㄟ右手 2022-09-17 13:14 196阅读 0赞

之前为大家介绍了一下有关LESS详解之混合(Mixins)的初级，想必大家已经对LESS详解之混合(Mixins)有了一些了解和认识了。那么下面就开始进入LESS详解之混合(Mixins)中级的介绍了。本次主要为大家介绍了多参数混合、@arguments 变量和!important关键字，希望能大家有所帮助。

# 　　多参数混合 #

多个参数可以使用分号或者逗号分隔，这里推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。

使用分号作为参数分隔符意味着可以将逗号分隔的一组值作为一个变量处理。换句话说，如果编译器在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，所有的逗号都属于参数中的一组值的分隔符。

2个参数，每个参数都含有通过逗号分隔的一组值的情况：.name(1, 2, 3; something, else)。

3个参数，每个参数只含一个数字的情况：.name(1, 2, 3)。

使用一个象征性的分号可以创建一个只含一个参数，但参数包含一组值的混合：.name(1, 2, 3;)。

逗号分隔的一组值参数的默认值：.name(@param1: red, blue;)。

使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上。小例子如下

*LESS代码*

.mixin(@width) {
        width-1: @width;
    }
    .mixin(@width; @height:2em) {
        width-2: @width;
        height-2: @height;
    }
    .mixin(@width; @height; @margin: 2em) {
        width-3: @width;
        height-3: @height;
        margin: @margin @margin @margin @margin;
    }
    
    h1 {
        .mixin(red);
    }
    div {
        .mixin(#000,3px);
    }
    span {
        .mixin(#fff,3px,5px);
    }

*编译后的CSS代码*

h1 {
      width-1: #ff0000;
      width-2: #ff0000;
      height-2: 2em;
    }
    div {
      width-2: #000000;
      height-2: 3px;
      width-3: #000000;
      height-3: 3px;
      margin: 2em 2em 2em 2em;
    }
    span {
      width-3: #ffffff;
      height-3: 3px;
      margin: 5px 5px 5px 5px;
    }

# 　　@arguments 变量 #

提到arguments想必对JavaScript了解的伙伴儿大概有所眼熟，这个在JavaScript中代表所有参数。而在LESS中代表的意思是一样的只不过用法有所不同。 如果你不想单独处理每一个参数的话就可以用@arguments。小例子如下

*LESS代码*

.transition (@moveStyle :all;@delayTime : 4s;@moveType : ease-in; @moveTime : 2s){
    
        -webkit-transition: @arguments;  
        -moz-transition: @arguments;  
        -o-transition: @arguments;  
        -ms-transition: @arguments;  
        transition: @arguments; 
        
    }
    
    div {
        .transition;
    }
    span {
        .transition (width);
    }
    h1 {
        .transition (height; 80s);
    }
    li {
        .transition (all; 80s; ease-out);
    }
    dd {
        .transition (color; 80s; ease-in-out; 30s);
    }

*编译后的CSS代码*

div {
      -webkit-transition: all 4s ease-in 2s;
      -moz-transition: all 4s ease-in 2s;
      -o-transition: all 4s ease-in 2s;
      -ms-transition: all 4s ease-in 2s;
      transition: all 4s ease-in 2s;
    }
    span {
      -webkit-transition: width 4s ease-in 2s;
      -moz-transition: width 4s ease-in 2s;
      -o-transition: width 4s ease-in 2s;
      -ms-transition: width 4s ease-in 2s;
      transition: width 4s ease-in 2s;
    }
    h1 {
      -webkit-transition: height 80s ease-in 2s;
      -moz-transition: height 80s ease-in 2s;
      -o-transition: height 80s ease-in 2s;
      -ms-transition: height 80s ease-in 2s;
      transition: height 80s ease-in 2s;
    }
    li {
      -webkit-transition: all 80s ease-out 2s;
      -moz-transition: all 80s ease-out 2s;
      -o-transition: all 80s ease-out 2s;
      -ms-transition: all 80s ease-out 2s;
      transition: all 80s ease-out 2s;
    }
    dd {
      -webkit-transition: color 80s ease-in-out 30s;
      -moz-transition: color 80s ease-in-out 30s;
      -o-transition: color 80s ease-in-out 30s;
      -ms-transition: color 80s ease-in-out 30s;
      transition: color 80s ease-in-out 30s;
    }

# 　　!important关键字 #

在CSS编写的时候经常会碰到在属性值后面添加!important的时候。而在LESS中为了能够方便，就设置了!important关键字混合方法。调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important。小例子如下

*LESS代码*

.my (@width : 20px; @height : 50px){
    	width:@width;
    	height : @height;
    }
    
    .meng {
    	.my;
    }
    .long {
    	.my(40px);
    }
    .menglong {
    	.my(234px; 299px);
    }
    .meng2 {
    	.my !important;
    }
    .long2 {
    	.my(40px) !important;
    }
    .menglong2 {
    	.my(234px; 299px) !important;
    }

*编译后的CSS代码*

.meng {
      width: 20px;
      height: 50px;
    }
    .long {
      width: 40px;
      height: 50px;
    }
    .menglong {
      width: 234px;
      height: 299px;
    }
    .meng2 {
      width: 20px !important;
      height: 50px !important;
    }
    .long2 {
      width: 40px !important;
      height: 50px !important;
    }
    .menglong2 {
      width: 234px !important;
      height: 299px !important;
    }

LESS详解之混合(Mixins)中级就为大家介绍到这里了，主要为大家介绍了多参数混合、@arguments 变量和!important关键字。希望能为大家在LESS的学习道路上有所帮助。