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？

获取信息这是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

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

Answer 2

好的，如果你尝试测试列表的最后一个值会怎样，因为在列表作为参数后，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或您想要做的任何事情放在中心位置！

SASS Mixin具有可选和可变参数

2 个答案: