List SASS-使用循环生成变量 TL；博士

可以使用SASS函数生成SASS变量吗？我的意图是采取一个小套的颜色和加工成许多阴影和色彩的这些颜色

问题是： N.B.我正在使用颜色函数

我有以下变量：

$root-color:    hsl(10, 85%, 45%);

$red:        $root-color;
$vermilion:  ryb-adjust-hue($red, 30);
$orange:     ryb-adjust-hue($red, 60);
$amber:      ryb-adjust-hue($red, 90);
$yellow:     ryb-adjust-hue($red, 120);
$chartreuse: ryb-adjust-hue($red, 150);
$green:      ryb-adjust-hue($red, 180);
$teal:       ryb-adjust-hue($red, 210);
$blue:       ryb-adjust-hue($red, 240);
$violet:     ryb-adjust-hue($red, 270);
$purple:     ryb-adjust-hue($red, 300);
$magenta:    ryb-adjust-hue($red, 330);

对于每种颜色，我都尝试生成以下输出（

$red

如下所示）：

我可以把这归结为以下几点：

对于每个

$color

：

• $red-10:$red

• 对于1-9（$1）：生成变量

  $#{$color}-0$1:shade（$red-10，（100-（$1*10））

• 对于1-9（$1）：生成变量（$1*10）：色调（$red-10，（$1*10））

很明显，我犯了一个错误：

错误：“…m1到9{”：应为1个选择器或at规则后的CSS无效，为“#{$color}-$1:shade”

我研究过使用列表和

@append

，但由于我有x种颜色，我想我必须创建动态列表？这可能吗

我知道我正在使用一个变量来创建一个变量（

$#{$color}

），并试图在循环中输出一个函数，但我不确定这在SASS中是否可行

---

如果没有，这类事情有更好的工作流程吗？

Currentry Sass不允许动态访问或创建变量。实现这一点的唯一方法是使用贴图。如果颜色数量可变，则可以使用贴图，其中每个键（颜色名称）都有包含所有生成颜色的列表，因此您可以跟踪它们

注意我仅出于测试目的更改了颜色函数和值（将

shade

更改为

light

并将

tint

更改为

darken

；同样在

tint

循环中，我在值中添加了

-100

，以将变暗值保持在1和100之间）.你应该用你的函数替换那些函数

// Colors to use
$colors:(
    red:  red,
    blue: blue
);

// Generated color lists
$generated: ();

// For each defined color
@each $name, $color in $colors {

    // Current color map
    $current : ();

    // Generates the colors transformations (shades)
    @for $i from 1 through 9 {
        $current: append($current, lighten($color, (100 - ($i * 10))));
    }

    // Adds the current color
    $current: append($current, $color);

    // Generates the colors transformations (tints)
    @for $i from 11 through 19 {
        $current: append($current, darken($color, ($i * 10) - 100));
    }

    // If the map has not been created
    @if map-has-key($generated, $name) == false {
        $generated: map-merge($generated, ($color : $current));
    }

}

// Create a function to get the desired color
@function get-color($color, $index: 10) { // Default to base color

    // Get the desired color map
    $list: map-get($generated, $color);

    // Return the color index
    @return nth($list, $index);

}

然后，您可以使用创建的函数获取您选择的颜色idex：

.foo {
    color: get-color(blue, 5);
}

您可以查看工作示例

---

希望有帮助。

Currentry Sass不允许动态访问或创建变量。实现这一点的唯一方法是使用贴图。如果颜色数量可变，则可以使用贴图，其中每个关键点（颜色名称）都包含所有生成颜色的列表，以便跟踪它们

注意我仅出于测试目的更改了颜色函数和值（将

shade

更改为

light

并将

tint

更改为

darken

；同样在

tint

循环中，我在值中添加了

-100

，以将变暗值保持在1和100之间）.你应该用你的函数替换那些函数

// Colors to use
$colors:(
    red:  red,
    blue: blue
);

// Generated color lists
$generated: ();

// For each defined color
@each $name, $color in $colors {

    // Current color map
    $current : ();

    // Generates the colors transformations (shades)
    @for $i from 1 through 9 {
        $current: append($current, lighten($color, (100 - ($i * 10))));
    }

    // Adds the current color
    $current: append($current, $color);

    // Generates the colors transformations (tints)
    @for $i from 11 through 19 {
        $current: append($current, darken($color, ($i * 10) - 100));
    }

    // If the map has not been created
    @if map-has-key($generated, $name) == false {
        $generated: map-merge($generated, ($color : $current));
    }

}

// Create a function to get the desired color
@function get-color($color, $index: 10) { // Default to base color

    // Get the desired color map
    $list: map-get($generated, $color);

    // Return the color index
    @return nth($list, $index);

}

然后，您可以使用创建的函数获取您选择的颜色idex：

.foo {
    color: get-color(blue, 5);
}

您可以查看工作示例

---

希望能有所帮助。

感谢您的清晰解释、示例和代码注释…非常有用！：）感谢您的清晰解释、示例和代码注释…非常有用！：）