1

これが範囲の問題であるかどうかはわかりませんが、次のことをよく検討してください。

$custom : #f20;

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

//scss
@include colorbyclass(custom);

//compiles
.custom { color:custom; }

私の問題は、 $class を関数内の変数への参照にしたいということです。
http://jsfiddle.net/yTkqp/

代替ソリューションの提案をお待ちしています。

4

2 に答える 2

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);
  }
}

ただし、ミックスインをまったく使用しないのと同じくらい冗長に見えます。

.container {
  div {
    width:20px;
    height:20px;
    &.custom {
        background: $custom; // could easily be replaced with a mixin that sets a bg color + other stuff
    }
  }
}
于 2013-01-09T17:09:28.313 に答える