SASS详解之混合(mixins)

分手后的思念是犯贱 2022-09-17 11:17 382阅读 0赞

SASS详解之混合(mixins)可以出现在SASS的任何地方。有很多类名具有相同或者相似的样式，就可以用SASS中的混合(mixins)来进行编写，然后针对不同类名的不同样式逐一编写。

# 　　定义一个混合(mixins) #

一个混合(mixins)中有专属于自己的名字，有专属于自己的属性和样式。如下

*SASS代码*

@mixin firstMixin {
    	width:10px;
    	height:20px;
    }

上面仅仅是一个很简单的混合(mixins)，仅仅包括了一些属性和属性值。混合(mixins)还可以有选择器，也可以后父级引用。如下

*SASS代码*

@mixin firstMixin {
    	.m_clear {
    		zoom:1;
    		&:after {
    			content:"";
    			display:block;
    			clear:both;
    		}
    	}
    }

# 　　使用一个混合(include) #

现在大家已经会定义一个混合(mixins)，一定想知道怎么调用它吧。那么就看个小例子吧。

*SASS代码*

@mixin firstMixin {
    	.m_clear {
    		zoom:1;
    		&:after {
    			content:"";
    			display:block;
    			clear:both;
    		}
    	}
    }
    
    div {
    	@include firstMixin;
    }

*编译后的CSS代码*

div .m_clear {
      zoom: 1;
    }
    div .m_clear:after {
      content: "";
      display: block;
      clear: both;
    }

上面的小例子是针对混合(mixins)中带有选择器的。不难看出，这个编译后的CSS中div中的类名clear具有混合(mixin)中的样式。而下面的例子，就是混合(mixin)中只有样式没有选择器的小例子。

*SASS代码*

@mixin twoMixin {
    	width:200px;
    	height:200px;
    }
    
    div {
    	@include twoMixin;
    }

*编译后的CSS代码*

div {
      width: 200px;
      height: 200px;
    }

混合(mixin)中定义的样式，哪个选择器引用了，就为其增加了混合(mixin)中的样式。若混合(mixin)中有选择器，那么就在其引用的选择器子集中添加相应的属性。再看个混合中引用混合的例子。

*SASS代码*

@mixin twoMixin {
    	width:200px;
    	height:200px;
    }
    @mixin threeMixin {
     	@include twoMixin;
    	border:1px solid red;}div {@include threeMixin;}

*编译后的CSS代码*

div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }

# 　　混合(mixin)中的参数 #

混合(mixin)中也可以设置参数，这可以让我们实现相似样式的共同编写。只需要在混合的名字后面添加变量名即可实现。如下

*SASS代码*

@mixin fourMixin ($width) {
    	width : $width;
    }
    
    div {
    	@include fourMixin(20px);
    }

*编译后的CSS代码*

div {
      width: 20px;
    }

很简单的用法，很实用的功能。那么这么实用的功能，有没有**默认参数值**呢?想知道的话就看看下面的小例子吧。

*SASS代码*

@mixin fourMixin ($width : 3000px) {
    	width : $width;
    }
    
    div {
    	@include fourMixin(20px);
    }
    
    span {
    	@include fourMixin();
    }

*编译后的CSS代码*

div {
      width: 20px;
    }
    
    span {
      width: 3000px;
    }

# 　　混合(mixin)中的关键词参数 #

所为关键词参数，就是在调用混合(mixin)的时候，写上参数的名称，编译出来的是一样的，这样写的好处就是方便开发者阅读。例子如下。

*SASS代码*

@mixin fourMixin ($width : 3000px) {
    	width : $width;
    }
    
    div {
    	@include fourMixin($width :20px);
    }

*编译后的CSS代码*

div {
      width: 20px;
    }

# 　　混合(mixin)中的可变关键词 #

有时候在编写混合(mixin)的时候，遇到的参数是不详的，不知道有多少，不知道应该设多少才好。具体使用的例子如下。

*SASS代码*

@mixin boxShadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
    }
    
    div {
      @include boxShadow(0px 4px 5px #666, 2px 6px 10px #999);
    }

*编译后的CSS代码*

div {
      -moz-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
      -webkit-box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
      box-shadow: 0px 4px 5px #666666, 2px 6px 10px #999999;
    }

这么人性化的可变参数不仅可以用在定义混合(mixin)中，也可以运用在使用过程中。实例如下。

*SASS代码*

$myArguments : red, 14px, 400px, 1000px;
    
    @mixin fiveMixin ($color , $size, $width, $height) {
    	color:$color;
    	font-size:$size;
    	width:$width;
    	height:$height;
    }
    
    div {
    	@include fiveMixin($myArguments...);
    }

*编译后的CSS代码*

div {
      color: red;
      font-size: 14px;
      width: 400px;
      height: 1000px;
    }

可以使用可变参数进行内外包装，然后最后在统一引入一个混合(mixin)，例子如下。

*SASS代码*

$myArguments : red, 14px, 400px, 1000px;
    
    @mixin fiveMixin ($color , $size, $width, $height) {
    	color:$color;
    	font-size:$size;
    	width:$width;
    	height:$height;
    }
    
    @mixin sixMixin ($myArguments) {
    	background:red;
    	@include fiveMixin($myArguments...);
    }
    
    div {
    	@include sixMixin($myArguments)	
    }

*编译后的CSS代码*

div {
      background: red;
      color: red;
      font-size: 14px;
      width: 400px;
      height: 1000px;
    }

# 　　混合(mixin)中的内容块(content) #

既然混合(mixin)可以传入很多东西，那么可不可以传入一定的内容呢?答案是可以的。有了内容块(content)，我们几乎无所不能了，我们可以在已经定义好的混合(mixin)中传入很多我们想要的样式，或者想要引入的选择器包含的选择器中的样式都可以传进去。如下

*SASS代码*

@mixin apply-to-ie6-only {
        div {
            width:300px;
            @content;
        }
    }
    @include apply-to-ie6-only {
        .meng {
            color:red;
        }
    }
    @include apply-to-ie6-only {
        height:500px;
    }

*编译后的CSS代码*

div {
      width: 300px;
    }
    div .meng {
      color: red;
    }
    
    div {
      width: 300px;
      height: 500px;
    }

# 　　变量和内容块(content) #

混合(mixin)可以通过内容块传进去全局变量，也可以引入局部变量。如下

*SASS代码*

@mixin contentMixin {
    	div {
    		height:300px;
    		@content;
    	}
    }
    
    $color :red;
    
    @include contentMixin {
    	color:$color;
    }
    
    #sidebar {
    
    	$sidebar-width: 300px;
    	width: $sidebar-width;
    
    	@include contentMixin {
    		width: $sidebar-width / 3;
    	}
    
    }

*编译后的CSS代码*

div {
      height: 300px;
      color: red;
    }
    
    #sidebar {
      width: 300px;
    }
    #sidebar div {
      height: 300px;
      width: 100px;
    }

SASS详解之混合(mixins)就为大家介绍到这里了，更多有关SASS的小介绍敬请关注梦龙小站有关SASS的更新。