学习笔记--SASS编程基础（二）混合—mixin

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gavincz/article/details/79702779

混合  @mixin（迷信^_^）

sass 中可以通过@mixin 声明混合，它具有以下几方面特性：

        1、可以传递参数   

        2、参数名称以$开始，多个参数之间使用逗号分隔

        3、@mixin 的混合代码块由@include 来调用

一、有参数混合：类似于函数的封装和调用

话不多说，上案例：

 sass编译：                                                             css 样式: 

@mixin opacity( $opacity : 50 ){                       |

            opacity : $opacity ;                                |

}                                                                         |

#imgBox{                                                           |    #imgBox{ 

            @include  opacity ;                               |               opacity : 50 ; 

}                                                                         |     }

#imgBox span{                                                  |   #imgBox span{  

            @include  opacity ( 90 ) ;                     |               opacity : 90  ;

}                                                                         |    }

二、多参数混合：

sass编译：

 @mixin box-specs（$border : 1px dashed #ccc , $padding : 10px ）{ 

                border-bottom : $border ;

                padding-top : $padding ;

                padding-bottom : $padding ;

}

.uls li{

                @include box-specs（ 1px solid #ccc ) ;

}

.lis a{

                 @include box-specs（ $padding : 15px  ) ;

}

css 样式：

.uls li{

                border-bottom : 1px solid #ccc ;

                padding-top : 10px ;

                padding-bottom : 10px ;

}

.lis a{

                border-bottom : 1px dashed #ccc ;

                padding-top : 15px ;

                padding-bottom : 15px ;

}