[Sass]混合宏
Posted sunmarvell
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[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 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代
以上是关于[Sass]混合宏的主要内容，如果未能解决你的问题，请参考以下文章