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;
}

我想使用它，但并不总是使用所有参数，因此我把它们按照我认为我需要它们的顺序排列。但是当我打电话给我的混音时，我需要输入所有参数。有什么方法可以避免这种情况吗？例如 CALL1 @include column-set（3,40px）; CALL2 @include列集（2,40px，10px，实心，1px，蓝色）;

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

Answer 1

您可以设置默认值，如果未在@include中设置值，则使用默认值：

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

您也可以设置为null。

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

在包含中，您可以调用要使用的参数：

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

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

1 个答案: