原文网址：Scss--@mixin--使用/实例_IT利刃出鞘的博客-CSDN博客

简介

        本文介绍Scss混合指令@mixin的用法    
    
    
。

        混合指令（Mixin）用于定义可重复使用的样式    
    
    
，避免了使用无语意的 class  


     


     


 ，比如 .float-left  


     


     


 。混合指令可以包含所有的 CSS 规则


 




 




 ，绝大部分 Sass 规则   

   

   

，甚至通过参数功能引入变量   

     

     

，输出多样化的样式


 




 




 。

定义混合指令：@mixin

        混合指令的用法是在 @mixin 后添加名称与样式



  




  




  ，比如名为 large-text 的混合通过下面的代码定义：

@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000; }

混合也需要包含选择器和属性  


  


  

，甚至可以用 & 引用父选择器：

@mixin clearfix { display: inline-block; &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html & { height: 1px } }

引用混合样式：@include

说明

        使用 @include 指令引用混合样式    
     
     
，格式是在其后添加混合名称




   




   




  ，以及需要的参数（可选）   

   

   

。

简单示例

SCSS：

.page-title { @include large-text; padding: 4px; margin-top: 10px; }

编译后的CSS：

.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

可以在最外层引用混合样式

也可以在最外层引用混合样式 



 



 

，不会直接定义属性               ，也不可以使用父选择器   

     

     

。

SCSS

@mixin silly-links { a { color: blue; background-color: red; } } @include silly-links;

编译后的CSS：

a { color: blue; background-color: red; }

混合样式中可以包含其他混合样式

比如

@mixin compound {   @include highlighted-background;   @include header-text; } @mixin highlighted-background { background-color: #fc0; } @mixin header-text { font-size: 20px; }

混合样式中应该只定义后代选择器




    




    




  ，这样可以安全的导入到文件的任何位置



  




  




  。

参数

概述

说明

        参数用于给混合指令中的样式设定变量












，并且赋值使用  


  


  

。在定义混合指令的时候               ，按照变量的格式 



     



     



  ，通过逗号分隔












，将参数写进圆括号里    
     
     
。引用指令时    
    
    
，按照参数的顺序  


     


     


 ，再将所赋的值对应写进括号




   




   




  。

示例

SCSS：

@mixin sexy-border($color, $width) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue, 1in); }

编译后的CSS：

p { border-color: blue; border-width: 1in; border-style: dashed; }

给参数设置默认值

        混合指令也可以使用给变量赋值的方法给参数设定默认值


 




 




 ，然后   

   

   

，当这个指令被引用的时候   

     

     

，如果没有给参数赋值



  




  




  ，则自动使用默认值 



 



 

。

SCSS：

@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); }

编译后的CSS：

p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; }

关键词参数

混合指令也可以使用关键词参数  


  


  

，上面的例子也可以写成：

p { @include sexy-border($color:blue); } h1 { @include sexy-border($color:blue,$width:2in); }

        虽然不够简明    
     
     
，但是阅读起来会更方便               。关键词参数给函数提供了更灵活的接口




   




   




  ，以及容易调用的参数




    




    




  。关键词参数可以打乱顺序使用 



 



 

，如果使用默认值也可以省缺               ，另外




    




    




  ，参数名被视为变量名












，下划线    
    
    
、短横线可以互换使用












。 

参数变量

说明

        有时               ，不能确定混合指令需要使用多少个参数 



     



     



  ，比如一个关于 box-shadow 的混合指令不能确定有多少个 shadow 会被用到               。这时












，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理 



     



     



  。

简单示例

SCSS

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

编译后的CSS

.shadowed { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; }

参数变量也可以用在引用混合指令（@include）

与平时用法一样    
    
    
，将一串值列表中的值逐条作为参数引用












。

SCSS

@mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values...); }

编译后的CSS：

.primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; }

向混合样式中导入内容

说明

        在引用混合样式的时候  


     


     


 ，可以先将一段代码导入到混合指令中


 




 




 ，然后再输出混合样式   

   

   

，额外导入的部分将出现在 @content 标志的地方    
    
    
。

简单示例

SCSS

@mixin apply-to-ie6-only { * html { @content; } } @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } }

编译后的CSS：

* html #logo { background-image: url(/logo.gif); }

为便于书写   

     

     

，@mixin 可以用 = 表示



  




  




  ，而 @include 可以用 + 表示  


  


  

，所以上面的例子可以写成：

=apply-to-ie6-only * html @content +apply-to-ie6-only #logo background-image: url(/logo.gif)

        注意： 当 @content 在指令中出现过多次或者出现在循环中时    
     
     
，额外的代码将被导入到每一个地方  


     


     


 。