css - Scss mixin 函数变量作用域

Question

如果这是一个范围问题，则不确定，请考虑以下事项：

$custom : #f20;

@mixin colorbyclass($class) {
  .#{$class} {
    background: $class;
  }
}

//scss
@include colorbyclass(custom);

//compiles
.custom { color:custom; }

我的问题是我希望 $class 成为函数内部变量的引用。
http://jsfiddle.net/yTkqp/

我很乐意为替代解决方案提供建议。

Answer 1

Sass 中不存在变量变量。对于您提供的 mixin，您可以将包含 2 个值的单个列表传递给它，也可以传递 2 个值。

选项1：

$custom : #f20;
@mixin colorbyclass($value) {
  &.#{nth($value, 1)} {
    background: nth($value, 2);
  }
}
.container {
  div {
    width:20px;
    height:20px;
    @include colorbyclass(custom $custom);
  }
}

选项#2：

$custom : #f20;
@mixin colorbyclass($class, $color) {
  &.#{$class} {
    background: $color;
  }
}
.container {
  div {
    width:20px;
    height:20px;
    @include colorbyclass(custom, $custom);
  }
}

不过，它们看起来就像根本不使用 mixin 一样冗长：

.container {
  div {
    width:20px;
    height:20px;
    &.custom {
        background: $custom; // could easily be replaced with a mixin that sets a bg color + other stuff
    }
  }
}

Answer 2

我认为您不能在 sass 中使用可变变量。This other question似乎回答了您的问题： 使用带有scss的哈希