sass mixin - 未使用所有参数

Question

我开始使用 sass，此刻我开始发现 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);

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

Answer 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)
}

sass mixin - 未使用所有参数

sass mixin - not all arguments used

arguments

sass

mixins