Использование «переменных каждого цикла» внутри оператора if в SASS - PullRequest
Новая
       35

Использование «переменных каждого цикла» внутри оператора if в SASS

0 голосов
/ 26 декабря 2018

Я пытаюсь создать группу стилей через каждый цикл в SASS.Стили должны генерироваться только в том случае, если установлена ​​переменная, которую просматривает каждый цикл.

Я пробовал разные переменные "стили", например: $ use - # {$ type}, но я немного растерялся.Даже пытался сделать это с помощью функции, но кажется, что функции не могут получить доступ к переменным циклов. 

$typo: (t1, t2);

$use-t1: 1; $t1-color: black;
$use-t2: 1; $t2-color: black;

@each $type in $typo{
  @if $#{use-$type} == 1{ 
    .#{$type}{
      color: $#{$type}-color;
    }
  }
}

Я бы ожидал, что переменные в первом раунде каждого цикла будут:

  • $ # {use- $ type} -> $ use-t1 -> 1
  • $ # {$ type} -color -> $ t1-color -> black

Но оба выдают «Ожидаемый идентификатор».или «Неизвестная переменная», в зависимости от того, как я ее пробую.

1 Ответ

0 голосов
/ 26 декабря 2018

Вы не можете ссылаться на переменную с помощью интерполяции - в вашем случае $#{$type}-color.Я бы порекомендовал вам вместо этого использовать карту - например: 

  $map: (
    t1: (use: 1, color: black),
    t2: (use: 2, color: white)    
  );


  @each $key, $value in $map {
    @if map-get($value, use) == 1 {
      .#{$key} { color: map-get($value, color); }    
    }
  }

  // output 
  .t1 { color: black; }

В качестве примечания стоит знать, что Sass не будет печатать свойства с нулевыми значениями или классами без свойств - почему вы можете сделать это без проверки use 

  $map: (
    t1: (color: black),
    t2: (color: null)    // no color => no prop => empty class => nothing printed  
  );
  @each $key, $value in $map {
    .#{$key} { color: map-get($value, color); }    
  }


  // output 
  .t1 { color: black; }
...