有参数mixin
在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,例如:
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
在混合宏“opacity”传了一个参数“$opacity”,而且给这个参数赋予了一个默认值“50”。
在调用类似这样的混合宏时,假设你的页面中的圆角很多地方都是需要的,那么这个时候只需要调用默认的混合宏“opacity”:
.opacity{
@include opacity; //参数使用默认值
}
编译出来的 CSS:
.opacity{
opacity: 50 / 100;
filter: alpha(opacity=50);
}
那么可以随机给混合宏传值,如:
.opacity-80{
@include opacity(80); //传递参数
}
编译出来的 CSS:
.opacity-80{
opacity: 80 / 100;
filter: alpha(opacity=80);
}
请用Sass语法编译,最终编译CSS是这样的
.btn {
-webkit-border-radius: 3px;
border-radius: 3px; }把一个按钮设置成3px圆角。