带有可选和可变参数的 SASS Mixin

Question

有没有办法在 sass mixin 中同时使用可选和可变元素？

我试试

@mixin name($className,  $centered: false, $dimension...)

但是第一个维度值被赋值给$centered

切换参数顺序不编译

@mixin name($className, $dimension..., $centered: false )

错误是：

SASSInvalid CSS after "..., $dimension...": expected ")", was ", $centered: fa..."

由于在很多地方（超过 70 个）使用了不带可选参数的 mixin，我不想让你全部更改以添加新参数，所以我想让它成为可选参数？

有什么方法可以改变这个 mixin，或者我必须在没有 $centered 的情况下保留原始版本并使用新参数创建一个 ovverride？​​p>

有关信息，这是 mixin 主体：

    @for $i from 1 through length($dimension){                              
        @if($centered) {
            .#{$className}Td#{$i}, .#{$className}Th#{$i}  { 
                width: nth($dimension, $i); 
                text-align:center;
            }
        }
        @else{
            .#{$className}Td#{$i}, .#{$className}Th#{$i} {width: nth($dimension, $i); }
        }
    }

编辑完整的牛逼示例：

我只是以更快的方式为我的表格的列宽定义 css，所以这个

@include nome("columnsName", 40%, 30%, 30%);

以这种方式呈现：

.columnsNameTd1, .columnsNameTh1{width: 40%;}

.columnsNameTd2, .columnsNameTh2{ width: 30%; }

.columnsNameTd3, .columnsNameTh3{ width: 30%;}

我想要一种将所有列文本对齐居中的方法，看看是否有办法指定要居中的列，默认情况下使所有其他列居中

Answer 1

好的，如果您尝试测试列表的最后一个值怎么办，因为 sass 似乎不支持将列表作为参数之后的任何其他内容。

@function last($list) {
  @return nth($list, length($list));
}
//returns the last item of a list

@mixin nome($className, $dimension...) {
    @for $i from 1 through length($dimension){
        @if(last($dimension) == true) {
            .#{$className}Td#{$i}, .#{$className}Th#{$i}  {
                width: nth($dimension, $i);
                text-align:center;
            }
        }
        @else{
            .#{$className}Td#{$i}, .#{$className}Th#{$i} {width: nth($dimension, $i); }
        }
    }
}

因此，如果您添加 @include nome("className", 4%, 4%, 4%, 6%, 70%, 12%, true); 并且最后一个值为 true 它应该将您的 div 居中，或者您尝试做的任何事情！

Answer 2

您不能按照您的要求做，因为可变参数（... 语法）绝对必须是最后一个。您有 2 个选项，我推荐选项 #2。

选项1（检查最后一个元素是否为布尔值）：

@mixin name($className, $dimension...) {
    $last: nth($dimension, length($dimension));
    $centered: if(type-of($last) == bool, $last, false);
    $length: if(type-of($last) == bool, length($dimension) - 1, length($dimension));

    @for $i from 1 through $length {
        .#{$className}Td#{$i}, .#{$className}Th#{$i} {
            width: nth($dimension, $i);
            @if($centered) {
                text-align: center;
            }
        }
    }
}

选项 2（使用 @content 指令）：

@mixin name($className, $dimension...) {
    @for $i from 1 through length($dimension) {
        .#{$className}Td#{$i}, .#{$className}Th#{$i} {
            width: nth($dimension, $i);
            @content;
        }
    }
}

// usage
@include name(rar, 10%, 20%, 30%);

@include name(rar, 10%, 20%, 30%) {
    text-align: center;
}