Создать одну переменную внутри другой в SASS

Question

У меня проблема с преобразованием полученных значений в переменные, чтобы я мог контролировать данные о прибытии.

HTML:

$itemicon-ca: "\a100";
$itemicon-star: "\a101";
$itemicon-pin: "\a102";

$itemicon-collection: ('ca', 'star', 'pin');

@for $i from 0 to length($itemicon-collection) {

  $name: nth($itemicon-collection, $i+1);
  $value: itemicon-#{$name};

    .itemicon-#{$name} {
      &:before {
        content: #{$value};
      }
    }
}

В настоящее время распечатайте это:

.itemicon-ca:before {
  content: itemicon-ca;
}

.itemicon-star:before {
  content: itemicon-star;
}

.itemicon-pin:before {
  content: itemicon-pin;
}

Идея состоит в том, чтобы преобразовать сгенерированное значение в переменную, чтобы вы могли напечатать данные

Я должен напечатать это:

.itemicon-ca {
  &:before {
    content: $itemicon-ca;
  }
}

.itemicon-star {
  &:before {
    content: $itemicon-star;
  }
}

.itemicon-pin {
  &:before {
    content: $itemicon-pin;
  }
}

Любые идеи или предложения, чтобы найти возможное решение?

Answer 1

Вы не можете динамически вызывать переменную в SASS. Тем не менее, вы можете достичь желаемого с помощью карты и цикла @each:

$itemicon-collection: (
  'ca' : "\a100",
  'star' : "\a101",
  'pin' : "\a102"
);

@each $name, $value in $itemicon-collection {
  .itemicon-#{$name} {
    &:before {
      content: #{$value};
    }
  }
}

Вы можете проверить этот для получения дополнительной информации о @each петлях.