检查 Sass mixin 中的变量并打印它是否已定义答案

【问题标题】：Check for a Variable in Sass mixin & print it if it's defined检查 Sass mixin 中的变量并打印它是否已定义
【发布时间】：2013-05-14 19:01:50
【问题描述】：

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

这是我的 mixin 的样子：

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

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

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

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

【问题讨论】：

标签： ruby sass

【解决方案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 中的 append() 函数。