乐趣区

关于前端:Sass-带参混合

jiezi

本节咱们来学习带参混合，Sass 中混合能够承受参数，咱们能够通过应用 @include 调用混合时给混合传参，来定义混合生成的准确款式。

给混合传参

混合能够用 SassScript 值作为参数，给定的参数被包含在混合中并且作为为变量提供给混合，既然是作为变量，那么定义参数时，参数名后面须要加一个 $ 符号。

当咱们定义一个带参混合时，混合的参数被作为变量名，写到混合名前面的小括号中，如果带有多个参数则通过逗号将参数分隔。上面咱们来看一下如何给一个混合传参。

示例：

例如在混合中定义两个参数 $num 和 $color，

@mixin my-text($num, $color) {
    font-size: $num;
    color: $color;
    font-weight: bold;
}

.other{@include my_text(14px, #fdef92);
}

编译成 CSS 代码：

.other {
  font-size: 14px;
  color: #fdef92;
  font-weight: bold;
}

咱们在通过 @include 指令调用混合时，须要给混合所带的参数赋值，例如上述代码中，给参数 $num 赋值为 14px，给参数 $color 赋值为 #fdef92。

默认值参数

像下面这个例子中，定义混合时带有两个参数，那么调用混合时必须给这个两个参数赋值，如果不给参数赋值或者只给一个参数赋值则会报错。例如上面是不给 $num 参数赋值的报错信息：

Error: Mixin my-text is missing argument $num.
        on line 8 of style.scss, in `my_text'
        from line 8 of style.scss
  Use --trace for backtrace.

而如果咱们心愿能够不给混合中的某个参数传参，能够在定义混合时应用一般变量的赋值语法为参数指定默认值，这样当调用混合时，如果不给参数赋值，则会应用默认值代替。

示例：

例如上面这个例子：

@mixin my-text($num, $color:pink) {
    font-size: $num;
    color: $color;
    font-weight: bold;
}

.other{@include my_text(14px);
}

编译成 CSS 代码：

.other {
  font-size: 14px;
  color: pink;
  font-weight: bold;
}

咱们在定义混合时，给参数 $color 指定了默认值 pink，所以当咱们没有给 $color 赋值时，会主动应用定义好的默认值。

关键字参数

混合中除了能够应用下面讲到的默认值参数，还能够应用关键字参数，关键字参数就是通过 $name:value 模式传参。应用这种形式来传参，参数的程序并不重要，只有不漏掉参数就能够啦。

示例：
@mixin my-text($num, $color) {
    font-size: $num;
    color: $color;
    font-weight: bold;
}

.other{@include my_text($color:#000, $num:16px);
}

编译成 CSS 代码：

.other {
  font-size: 16px;
  color: #000;
  font-weight: bold;
}

可变参数

当咱们给混合定义参数时，有时可能不确定混合中参数的数量，这时咱们就能够应用 ... 来设置可变参数。

示例：

例如咱们给一个元素设置 box-shadow 时，能够应用任何数量的 box-shadow 作为参数：

@mixin my-text($shadow...) {box-shadow: $shadow;}

.other{@include my_text(2px 5px 10px #ccc, 3px 6px 9px #aaa);
}

编译成 CSS 代码：

.other {box-shadow: 2px 5px 10px #ccc, 3px 6px 9px #aaa;}

能够看到，上述代码中，在调用混合时，给 my_text 指定了两个参数的值。当然咱们也能够给它指定多个参数的值。

退出移动版