Sass--传一个带值的参数

在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：

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

在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。

在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-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%;
}

 

转载于:https://www.cnblogs.com/qjuly/p/9073265.html