如何在SASS中生成动态变量

Question

如何在SASS中生成动态变量？

我有带颜色的数组/列表：

$colors: (
  1: 'black',
  2: 'red',
  3: 'yellow'
);

现在，我还生成了动态类：

@each $i, $color in $colors {
  .bg-color-#{$i} {
    background-color: $color;
  }

  .text-color-#{$i} {
    color: $i;
  }
}

现在，我希望只有变量，就像这样：

$color-1: 'black';
$color-2: 'red';
// etc.

并且在将来像这样使用：

.some-class {
    color: $color-2;
}

因此，我的循环应该是基于数组/列表生成动态变量。

Answer 1

快速结果：

​

/* Colors */
$colors: 'black', 'red', 'yellow';
@each $color in $colors {
    .color-#{$color} {
        color: $color;
    }
}

​

或

​

/* Step 1: styles.scss
/// ************************
/// @example
///  @include generate-color();
/// @return
///   .color-black { color: "black"; }
///   .color-red {color: "red"; }
///   .color-yellow {color: "yellow"; }
*/
@mixin generate-color() {
    $colors: 'black', 'red', 'yellow';
    @each $color in $colors {
        .color-#{$color} {
            color: $color;
        }
    }
}

/* Step 2: */
@include generate-color();

/* Step 3: Return ex. styles.css: */
.color-black {
  color: "black";
}

.color-red {
  color: "red";
}

.color-yellow {
  color: "yellow";
}

​