Область переменных функции Scss mixin

Не забудьте, если это проблема с областью, хорошо учтите следующее:

$custom : #f20;

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

//scss
@include colorbyclass(custom);

//compiles
.custom { color:custom; }

My issue being that i want $class to be a reference to my variable inside the function.
http://jsfiddle.net/yTkqp/

Я готов занять альтернативные решения.

1
добавлено отредактировано
Просмотры: 2
nl ja de

2 ответы

Переменные переменные не существуют в Sass. Для представленного вами микса вы можете либо передать ему один список, содержащий 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
    }
  }
}
1
добавлено
Я вернулся к оригинальному решению, точно так же, как и ваше последнее предложение. Благодарю.
добавлено автор Christian Werther, источник

I don't think you can use variable variables in sass. This other question seems to answer your question: using hash with scss

0
добавлено