Question

我有一个带有命名颜色的mixin：

@mixin color-classes-rendering {
    $colors: (
        rebeccapurple
    );

    @each $value in $colors {
        .#{nw}-#{nth($value, 1)}#{" > span"} {
            background-color: nth($value, 1);
        }
    }
}

这是编译的CSS：

.nw-rebeccapurple > span {
    background-color: rebeccapurple;
}

我不知道为什么，但Android中的Chrome中没有显示“rebeccapurple”。可以将它转换为这个：

.nw-rebeccapurple > span {
    background-color: #663399;
}

Answer 1

虽然Sass确实提供了为任何给定颜色提取单个R，G和B值的函数，但它没有提供将这些值转换为十六进制的便捷方法。将它转换为rgb（）格式会更简单。

$color: rebeccapurple;

.foo {
    color: #{'rgb(#{red($color)}, #{green($color)}, #{blue($color)})'};
}

输出：

.foo {
  color: rgb(102, 51, 153);
}

另请参阅：Why does Sass change the format of my colors?

我还应该指出，到目前为止你写的内容更适合映射：

$colors: (
    'rebeccapurple': #639,
    'black': #000
);

@each $name, $color in $colors {
    .nw-#{$name} > span {
        background-color: $color;
    }
}

输出（压缩格式）：

.nw-rebeccapurple > span { background-color: #639; }

.nw-black > span { background-color: #000; }

Answer 2

我的解决方法是手动输入每种命名颜色的HEX值，如下所示：

@mixin color-classes-rendering {
    $colors: (
        rebeccapurple   #663399,
        black           #000000
    );

    @each $value in $colors {
        .#{nw}-#{nth($value, 1)}#{" > span"} {
            background-color: nth($value, 2);
        }
    }
}

如何使用SCSS将命名颜色转换为HEX？

2 个答案: