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中使用变量变量。这个问题似乎回答了你的问题：using hash with scss

Scss mixin函数变量范围

2 个答案: