Sass 用变量作为变量名的语法

问题描述

问 题

$color-primary: #108ee9;
$color-danger: #d9534f;
@each $c in primary, danger {
    .btn-#{$c} {
        border-color: $color-#{$c};
        background-color: $color-#{$c};
        color: #ffffff;
    }
}

上述代码根据当前类型，获取不同的变量，编译时报错。
如果变量名的一部分为变量，需要怎么处理?

解决方案

印象中没有这种用过，也查了相关资料也发现 ~。~ ，不过这样这样做

$colors: (
  primary: #108ee9,
  danger: #d9534f
);

@each $c in primary, danger {
    .btn-#{$c} {
        border-color: map-get($colors, $c);
        background-color: map-get($colors, $c);
        color: #ffffff;
    }
}

这篇关于Sass 用变量作为变量名的语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！