ruby - 检查 Sass mixin 中的变量并在定义时打印它

Question

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

这是我的 mixin 的样子：

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

但这不起作用并且会引发错误

警告：语法错误：“...$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;
}