[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 的混合宏,带有多个参数,这个时候可以使用“ … ”来替代