SASS-使用循环生成变量

155

加雷斯·詹姆斯

TL; DR

SASS函数可以用于生成SASS变量吗？我的意图是采用少量颜色并将它们处理为这些颜色的许多阴影和色调。

问题：

注意：我正在使用https://github.com/at-import/color-schemer进行颜色功能。

我有以下变量：

$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如下所示）：

$red-10: $red;

$red-01: shade($red-10, 90);
$red-02: shade($red-10, 80);
$red-03: shade($red-10, 70);
$red-04: shade($red-10, 60);
$red-05: shade($red-10, 50);
$red-06: shade($red-10, 40);
$red-07: shade($red-10, 30);
$red-08: shade($red-10, 20);
$red-09: shade($red-10, 10);

$red-11: tint($red-10, 10);
$red-12: tint($red-10, 20);
$red-13: tint($red-10, 30);
$red-14: tint($red-10, 40);
$red-15: tint($red-10, 50);
$red-16: tint($red-10, 60);
$red-17: tint($red-10, 70);
$red-18: tint($red-10, 80);
$red-19: tint($red-10, 90);

我可以将其归结为以下几点：

对于每个$color：

$red-10: $red;
对于1-9 ($1)：生成变量$#{$color}-0$1: shade($red-10, (100 - ($1 * 10)))
对于1-9 ($1)：生成变量$#{$color}-($1 * 10): tint($red-10, ($1 * 10))

显然我得到一个错误：

Error: Invalid CSS after "...m 1 through 9 {": expected 1 selector or at-rule, was "#{$color}-$1: shade"

我已经研究过使用列表，@append但是由于我有x种颜色，我想必须创建动态列表？那有可能吗？

我知道我既在使用变量来创建变量（$#{$color}），又试图在循环内输出函数，并且不确定用SASS能否实现。

如果不是，是否有更好的工作流程来处理这种事情？

傻的面孔

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

注意我改变了颜色的功能和值仅用于测试目的（改变shade到lighten和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);
}

您可以在此处查看工作示例。

希望能帮助到你。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-12-1

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章