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

 

　　定义一个混合(mixins)

 

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

 

　　SASS代码

 

1. class="alt">@mixin firstMixin {  
2.     width:10px;  
3.     height:20px;  
4. }  

 

 

 

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

 

　　SASS代码

 

 

1. @mixin firstMixin {  
2.     .m_clear {  
3.         zoom:1;  
4.         &:after {  
5.             content:"";  
6.             display:block;  
7.             clear:both;  
8.         }  
9.     }  
10. }  

 

　　使用一个混合(include)

 

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

 

　　SASS代码

 

 

1. @mixin firstMixin {  
2.     .m_clear {  
3.         zoom:1;  
4.         &:after {  
5.             content:"";  
6.             display:block;  
7.             clear:both;  
8.         }  
9.     }  
10. }  
11.   
12. div {  
13.     @include firstMixin;  
14. }  

 

 

　　编译后的CSS代码

1. div .m_clear {  
2.   zoom: 1;  
3. }  
4. div .m_clear:after {  
5.   content: "";  
6.   display: block;  
7.   clear: both;  
8. }  

 

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

 

　　SASS代码

 

 

1. @mixin twoMixin {  
2.     width:200px;  
3.     height:200px;  
4. }  
5.   
6. div {  
7.     @include twoMixin;  
8. }  

 

 

　　编译后的CSS代码

1. div {  
2.   width: 200px;  
3.   height: 200px;  
4. }  

 

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

 

　　SASS代码

 

 

1. @mixin twoMixin {  
2.     width:200px;  
3.     height:200px;  
4. }  
5. @mixin threeMixin {  
6. <pre name="code" class="plain"> @include twoMixin;  
7. </pre>  border:1px solid red;}div {@include threeMixin;}  

 

 

　　编译后的CSS代码

1. div {  
2.   width: 200px;  
3.   height: 200px;  
4.   border: 1px solid red;  
5. }  

 

 

　　混合(mixin)中的参数

 

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

 

　　SASS代码

 

 

1. @mixin fourMixin ($width) {  
2.     width : $width;  
3. }  
4.   
5. div {  
6.     @include fourMixin(20px);  
7. }  

 

 

　　编译后的CSS代码

1. div {  
2.   width: 20px;  
3. }  

 

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

 

　　SASS代码

 

 

1. @mixin fourMixin ($width : 3000px) {  
2.     width : $width;  
3. }  
4.   
5. div {  
6.     @include fourMixin(20px);  
7. }  
8.   
9. span {  
10.     @include fourMixin();  
11. }  

 

 

　　编译后的CSS代码

1. div {  
2.   width: 20px;  
3. }  
4.   
5. span {  
6.   width: 3000px;  
7. }  

 

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

　　

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

 

　　SASS代码

 

 

1. @mixin fourMixin ($width : 3000px) {  
2.     width : $width;  
3. }  
4.   
5. div {  
6.     @include fourMixin($width :20px);  
7. }  

 

 

　　编译后的CSS代码

1. div {  
2.   width: 20px;  
3. }  

 

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

 

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

 

　　SASS代码

 

 

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

 

 

　　编译后的CSS代码

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

 

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

 

　　SASS代码

 

 

1. $myArguments : red, 14px, 400px, 1000px;  
2.   
3. @mixin fiveMixin ($color , $size, $width, $height) {  
4.     color:$color;  
5.     font-size:$size;  
6.     width:$width;  
7.     height:$height;  
8. }  
9.   
10. div {  
11.     @include fiveMixin($myArguments...);  
12. }  

 

 

　　编译后的CSS代码

1. div {  
2.   color: red;  
3.   font-size: 14px;  
4.   width: 400px;  
5.   height: 1000px;  
6. }  

 

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

 

　　SASS代码

 

 

1. $myArguments : red, 14px, 400px, 1000px;  
2.   
3. @mixin fiveMixin ($color , $size, $width, $height) {  
4.     color:$color;  
5.     font-size:$size;  
6.     width:$width;  
7.     height:$height;  
8. }  
9.   
10. @mixin sixMixin ($myArguments) {  
11.     background:red;  
12.     @include fiveMixin($myArguments...);  
13. }  
14.   
15. div {  
16.     @include sixMixin($myArguments)   
17. }  

 

 

　　编译后的CSS代码

1. div {  
2.   background: red;  
3.   color: red;  
4.   font-size: 14px;  
5.   width: 400px;  
6.   height: 1000px;  
7. }  

 

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

 

 

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

 

　　SASS代码

 

 

1. @mixin apply-to-ie6-only {  
2.     div {  
3.         width:300px;  
4.         @content;  
5.     }  
6. }  
7. @include apply-to-ie6-only {  
8.     .meng {  
9.         color:red;  
10.     }  
11. }  
12. @include apply-to-ie6-only {  
13.     height:500px;  
14. }  

 

 

　　编译后的CSS代码

1. div {  
2.   width: 300px;  
3. }  
4. div .meng {  
5.   color: red;  
6. }  
7.   
8. div {  
9.   width: 300px;  
10.   height: 500px;  
11. }  

 

　　变量和内容块(content)

 

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

 

　　SASS代码

 

 

1. @mixin contentMixin {  
2.     div {  
3.         height:300px;  
4.         @content;  
5.     }  
6. }  
7.   
8. $color :red;  
9.   
10. @include contentMixin {  
11.     color:$color;  
12. }  
13.   
14. #sidebar {  
15.   
16.     $sidebar-width: 300px;  
17.     width: $sidebar-width;  
18.   
19.     @include contentMixin {  
20.         width: $sidebar-width / 3;  
21.     }  
22.   
23. }  

 

 

　　编译后的CSS代码

 

 

1. div {  
2.   height: 300px;  
3.   color: red;  
4. }  
5.   
6. #sidebar {  
7.   width: 300px;  
8. }  
9. #sidebar div {  
10.   height: 300px;  
11.   width: 100px;  
12. }  

 

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