SASS 带有可选和可变参数的混合

Question

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

我试试

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

但第一个维度值分配给了$centered

切换参数顺序不编译

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

错误是：

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

因为没有可选参数的 mixin 在很多地方使用（超过 70 个）我不希望你改变它来添加新参数，所以我想保留它可选？

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

有关信息，这是混合主体：

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

使用完整的牛皮示例进行编辑：

只是我以更快的方式为我的 table 的列宽定义 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;
}

SASS 带有可选和可变参数的混合

SASS Mixin with optional and variable parameters

css

sass

mixins