sass传参

sass传参用@mixin来声明，用@include来调用；例如：其中@mixin opa($opa:50)中的$opa:50表示：不传参数时opa=50,否则为所传参数。

@mixin opa($opa:50) {  
	opacity:$opa/100;
	filter:alpha(opacity=$opa);
}
.demo{
	@include opa(30);
	width:$width;
	height:$width;
	margin:0 auto;
	text-align:center;
	color:red;
	font-size:20px;
	background-color:blue;
}

如果@mixin opa()，此时可以不传参数

@mixin opa() {  	
        opacity:0.5;
	filter:alpha(opacity=50);
}
.demo{
	@include opa();
	width:$width;
	height:$width;
	margin:0 auto;
	text-align:center;
	color:red;
	font-size:20px;
	background-color:blue;
}

 如果@mixin opa($opa)，则必须传参，否则用ruby的sass编译不通过。

当sass传多个参数时用逗号隔开， 也可以跳过中间参数，直接给最后一个传参，但要加上变量名：

例如：给三角形传参@include sj($fx:left,$color:orange)就跳过中间的$size直接给$color传参。

@mixin sj($fx:top,$size:200px,$color:red){
	@if ($fx==top){
		border-style:dashed dashed solid dashed;
		border-color:transparent transparent $color transparent;
	}
	@if ($fx==right){
		border-style:dashed dashed dashed solid;
		border-color:transparent transparent transparent $color;
	}
	@if ($fx==bottom){
		border-style:solid dashed dashed dashed;
		border-color:$color transparent transparent transparent;
	}
	@if ($fx==left){
		border-style:dashed solid dashed dashed;
		border-color:transparent $color transparent transparent;
	}
	width: 0;
	height: 0;
	overflow:hidden;
	border-width:$size;
}
.demo{
	@include sj($fx:left,$color:orange)
}

用sass编译后生成的css样式为：由于没有给$size传参，所以默认值200px

.demo {
  border-style: dashed solid dashed dashed;
  border-color: transparent orange transparent transparent;
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 200px; }

/*# sourceMappingURL=chuancan.css.map */

用浏览器打开，三角形形状如下图：