sass mixin - 并非所有参数都使用答案

【问题标题】：sass mixin - not all arguments usedsass mixin - 并非所有参数都使用
【发布时间】：2019-09-26 17:40:57
【问题描述】：

我开始使用 sass，目前我开始发现 mixin 并编写自己的。我有一个mixin：

@mixin column-set ($number, $width, $gap, $rule-style, $rule-width, $rule-color, $col-span) {
-webkit-column-count: $number;     /* Chrome, Safari, Opera */
-moz-column-count: $number;        /* Firefox */
column-count: $number;
-webkit-column-width: $width;      /* Chrome, Safari, Opera */
-moz-column-width: $width;         /* Firefox */
column-width: $width;
-webkit-column-gap: $gap;          /* Chrome, Safari, Opera */
-moz-column-gap: $gap;             /* Firefox */
column-gap: $gap;
-webkit-column-rule-style: $rule-style;    /* Chrome, Safari, Opera */
-moz-column-rule-style: $rule-style;       /* Firefox */
column-rule-style: $rule-style;
-webkit-column-rule-width: $rule-width;    /* Chrome, Safari, Opera */
-moz-column-rule-width: $rule-width;       /* Firefox */
column-rule-width: $rule-width;
-webkit-column-rule-color: $rule-color;    /* Chrome, Safari, Opera */
-moz-column-rule-color: $rule-color;       /* Firefox */
column-rule-color: $rule-color;
-webkit-column-span: $col-span;            /* Chrome, Safari, Opera */
column-span: $col-span;
}

我想使用它，但并不总是与所有参数一起使用，因此我将它们按我认为需要它们的顺序排列。但看起来当我称之为mixin 时，我需要输入所有参数。有没有办法避免这种情况？例如：

呼叫1 @include column-set(3, 40px);

呼叫2 @include column-set (2, 40px, 10px, solid, 1px, blue);

我试图在那里找到答案，但没有成功。有人可以帮忙吗？

【问题讨论】：

标签： sass arguments mixins

【解决方案1】：

你可以设置一个默认值，如果@include中没有设置值则使用默认值：

@mixin column-set ($number:3, $width:200px, $gap:20px){
...
}

您也可以设置为null。

@mixin column-set ($number:3, $width:null, $gap:null){
...
}

在include中可以调用你要使用的参数：

.class{
  @include column-set($gap:10px)
}

【讨论】：