sass_混合声明和调用

混合声明和调用

---

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。

声明的@mixin通过@include来调用。

在 Sass 中，使用“@mixin”来声明一个混合宏。如：

 
 
 @mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用：

 
 
button {
    @include border-radius;
}

这个时候编译出来的 CSS:

 
 
button {
  -webkit-border-radius: 5px;
  border-radius: 5px;

 
 
}