SCSS变量名称插值

时间:2018-07-18 17:38:57

标签: css sass

我正在尝试使用SCSS中的循环和映射创建一堆按钮,但是我不知道是否可以进行以下操作。搜索此内容时,找不到直接答案。

有人知道我能做到吗?如果可以的话,我的语法有什么错误?

  $button-variants:(
  primary: 'primary',
  secondary: 'secondary',
  positive: 'positive',
  negative: 'negative',
  warning: 'warning'
  );

  @each $key,$val in $button-variants {
    .c-button--#{$key} {
       @include button($color-#{$key}, $color-#{$key}-highlight, true);
    }
  }

我收到一个错误:

Error: Undefined variable: "$color-".
        on line 54 of source/css/scss/04-components/_button.scss
>>        @include button($color-#{$key}, $color-#{$key}-highlight, true);

1 个答案:

答案 0 :(得分:0)

尝试类似的方法:

/* Define the Sassy Map called $icons */
$icons: (
  checkmark: a,
  plus: b,
  minus: c
);

/* For each key in the map, create a class */
@each $name, $value in $icons {
  .icon--#{$name} {
    content: $value;
  }
}

您将得到以下结果:

/* For each key in the map, created a class */
.icon--checkmark {
  content: "a";
}

.icon--plus {
  content: "b";
}

.icon--minus {
  content: "c";
}