Css 具有可选和可变参数的SASS Mixin

有没有一种方法可以在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

有关信息，请参见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，所以

@包括名称，40%，30%，30%

以这种方式呈现：

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

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

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

---

我想要一种文本对齐所有列居中的方法，可能会很有趣，看看是否有办法指定要居中的列，使所有其他列默认为左

ok，如果您尝试测试列表的最后一个值会怎么样，因为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 nomeclassName，则为4%，4%，4%，6%，70%，12%，true；最后一个值是真的，它应该位于div的中心，或者你想做的任何事情

好的，如果您尝试测试列表的最后一个值会怎么样，因为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 nomeclassName，则为4%，4%，4%，6%，70%，12%，true；最后一个值是真的，它应该位于div的中心，或者你想做的任何事情

你不能按要求做，因为变量参数。。。语法绝对必须是最后一个。你有两个选择，我推荐选择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;
}

---

你不能做你所要求的，因为变量参数。。。语法绝对必须是最后一个。你有两个选择，我推荐选择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;
}

---

在第二次混音中，在$centered:false之后有一个逗号。。因为这应该行得通。否则，您可以尝试@if$centered==true，尽管这在没有它的情况下应该可以工作逗号是一个复制粘贴错误，我添加了编译错误，基本上他似乎不想在$dimension之后添加任何内容…您可以尝试删除argslist…，也许这会终止编译过程。但我假设一个维度需要不止一个变量：是的，我想要的用法是：@include nomeclassName，4%，4%，4%，6%，70%，12%，true；在第二次混音中，在$centered:false之后有一个逗号。。因为这应该行得通。否则，您可以尝试@if$centered==true，尽管这在没有它的情况下应该可以工作逗号是一个复制粘贴错误，我添加了编译错误，基本上他似乎不想在$dimension之后添加任何内容…您可以尝试删除argslist…，也许这会终止编译过程。但我假设一个维度需要不止一个变量：是的，我想要的用法是：@include nomeclassName，4%，4%，4%，6%，70%，12%，true；如果使用@for$i from 1到length$dimension-1可以工作，但是不要链接太多，因为变量维度变成了其他维度。如果使用@for$i from 1到length$dimension-1可以工作，但是不要链接太多，因为变量维度变成了其他维度。请参阅我的编辑：mixin的真正目的是通过itself@gt.guybrush这怎么不符合你的要求呢？我看到了以前的版本，这个选项2很棒，在@content之前从未见过。现在我将尝试搜索一个可以设置每个列的文本对齐的版本参见我的编辑：mixin的真正目的是通过itself@gt.guybrush这怎么不符合你的要求呢？我看到了以前的版本，这个选项2很棒，在@content之前从未见过。现在我将尝试搜索一个可以设置每列文本对齐的版本