Question

我正在创建一个带有3个参数的Sass mixin，其中一个是可选的＆amp;如果它通过我想要打印出来，否则我不想打印任何东西。

以下是我的mixin的样子：

@mixin name($arg1, $arg2, $arg3: false){
    @if $arg3 { #{$arg3} , }
    & {
        color: #{$arg1};
        > #{$arg2}{
            &:before{
                something...
            }
        }
    }
}

但这不起作用＆amp;它会抛出错误

警告：语法错误：“... $ arg3}”后的CSS无效：期望“{”，是“}”

那么我怎样才能达到预期的效果呢？

Answer 1

这就是你写它的方式：

@mixin name($arg1, $arg2, $arg3: false) {
    $sel: ();
    @if $arg3 {
        $sel: append($sel, unquote($arg3));
    }
    $sel: append($sel, unquote('&'), comma);
    #{$sel} {
        color: #{$arg1};
        > #{$arg2} {
            &:before{
                border: 1px solid;
            }
        }
    }
}

.foo {
    @include name(yellow, blue, '.bar');
}

输出：

.foo .bar, .foo {
  color: yellow;
}

.foo .bar > blue:before, .foo > blue:before {
  border: 1px solid;
}

然而，最好这样写：

@mixin name($arg1, $arg2) {
    color: #{$arg1};
    > #{$arg2} {
        &:before{
            border: 1px solid;
        }
    }
}

%foo, .foo {
    @include name(yellow, blue);
}

.foo .bar {
    @extend %foo;
}

检查Sass mixin＆amp;中的变量。如果已定义则打印它

1 个答案: