Question

如何在另一个变量中使用变量？我怎么能这样做：

$buttons: default, success, primary, info, warning, danger;

$default_color: #aaa;
$success_color: #bbb;
$primary_color: #ccc;
$info_color: #ddd;
$warning_color: #eee;
$danger_color: #fff;


@each $b in $buttons {
  .btn-#{$b} {
    color: $#{b}_color;
  }
}

Answer 1

您正在寻找的方式尚未在SCSS中实施，但您可以这样做：

$default_color: #aaa;
$success_color: #bbb;
$primary_color: #ccc;
$info_color:    #ddd;
$warning_color: #eee;
$danger_color:  #fff;

$buttonsList:
  "default" $default_color,
  "success" $success_color,
  "primary" $primary_color,
  "info"    $info_color,
  "warning" $warning_color,
  "danger"  $danger_color;

@each $b in $buttonsList {
  .btn-#{nth($b, 1)} {
    color: nth($b, 2);
  }
}

Sassmeister link。

Answer 2

Sass不允许动态创建或访问变量。请改用地图 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps 示例：https://stackoverflow.com/a/17978519

如何在SCSS中的另一个变量中使用变量

2 个答案: