SASS详解之混合(mixins)

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

 

  定义一个混合(mixins)

 

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

 

  SASS代码

 

  1. @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.   displayblock;  
  7.   clearboth;  
  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.   width200px;  
  3.   height200px;  
  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.   width200px;  
  3.   height200px;  
  4.   border1px 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.   width20px;  
  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.   width20px;  
  3. }  
  4.   
  5. span {  
  6.   width3000px;  
  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.   width20px;  
  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 #6666662px 6px 10px #999999;  
  3.   -webkit-box-shadow: 0px 4px 5px #6666662px 6px 10px #999999;  
  4.   box-shadow: 0px 4px 5px #6666662px 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.   colorred;  
  3.   font-size14px;  
  4.   width400px;  
  5.   height1000px;  
  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.   backgroundred;  
  3.   colorred;  
  4.   font-size14px;  
  5.   width400px;  
  6.   height1000px;  
  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.   width300px;  
  3. }  
  4. div .meng {  
  5.   colorred;  
  6. }  
  7.   
  8. div {  
  9.   width300px;  
  10.   height500px;  
  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.   height300px;  
  3.   colorred;  
  4. }  
  5.   
  6. #sidebar {  
  7.   width300px;  
  8. }  
  9. #sidebar div {  
  10.   height300px;  
  11.   width100px;  
  12. }  



 

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

posted @ 2013-10-28 09:32  web8  阅读(2122)  评论(1编辑  收藏  举报