[Sass]混合宏

[Sass]混合宏-声明混合宏

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

[Sass]混合宏-调用混合宏

“@include”来调用

@mixin 类似函数声明，@include 类似函数调用

                                                                                                                                                       不带参数混合宏：

如：声明：

@mixin border-radius{

    -webkit-border-radius: 5px;

    border-radius: 5px;

}

在一个按钮中调用：

button {

    @include border-radius;}

带参数混合宏：

Sass 的混合宏有一个强大的功能，可以传参，那么在 Sass 中传参主要有以下几种情形：

A) 传一个不带值的参数

在混合宏中，可以传一个不带任何值的参数，比如：

@mixin border-radius($radius){

  -webkit-border-radius: $radius;

  border-radius: $radius;

}

调用的时候给这个混合宏传一个参数值：

.box {

  @include border-radius(3px);

}

编译出来的 CSS:

.box {

  -webkit-border-radius: 3px;

  border-radius: 3px;

}

B) 传一个带值的参数

给混合宏的参数传一个默认值，例如：

@mixin border-radius($radius:3px){

  -webkit-border-radius: $radius;

  border-radius: $radius;

}

调用：

.btn {

  @include border-radius;

}

编译出来的 CSS:

.btn {

  -webkit-border-radius: 3px;

  border-radius: 3px;

}

但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：

.box {

  @include border-radius(50%);

}

编译出来的 CSS:

.box {

  -webkit-border-radius: 50%;

  border-radius: 50%;

}

C) 传多个参数

@mixin center($width,$height){

  width: $width;

  height: $height;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -($height) / 2;

  margin-left: -($width) / 2;

}

调用：

.box-center {

  @include center(500px,300px);

}

编译出来 CSS:

.box-center {

  width: 500px;

  height: 300px;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-top: -150px;

  margin-left: -250px;

}

  有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：

@mixin box-shadow($shadows...){

  @if length($shadows) >= 1 {

    -webkit-box-shadow: $shadows;

    box-shadow: $shadows;

  } @else {

    $shadows: 0 0 2px rgba(#000,.25);

    -webkit-box-shadow: $shadow;

    box-shadow: $shadow;

  }

}

在实际调用中：

.box {

  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));

}

color:rgba(#b3b3b3, .25)sass中能这样写，css中不能

编译出来的CSS:

.box {

  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);

}

复杂的混合宏：

上面是一个简单的定义混合宏的方法，当然， Sass 中的混合宏还提供更为复杂的，可以在大括号里面写上带有逻辑关系，如：

@mixin box-shadow($shadow...) {

  @if length($shadow) >= 1 {

    @include prefixer(box-shadow, $shadow);

  } @else{

    $shadow:0 0 4px rgba(0,0,0,.3);

    @include prefixer(box-shadow, $shadow);

  }

}

这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代