SASS功能变暗&；使用“颜色对象”时不亮起

我试图使用

darken

sass函数，但当我从我的scss模块中的sass对象读取时，它认为颜色实际上是一个字符串，因此该函数无法解析传入的变量

变量。scss

$primary: #ae9fec;
$secondary: #d19ac1;

$theme: (
    "primary": ($primary, white),
    "secondary": ($secondary, white)
);

@each $colorGroup in $theme {
    &[data-variant="#{nth($colorGroup, 1)}"] {
        background-color: #{nth(nth($colorGroup, 2), 1)}); // this works

        &:hover {
            background-color: darken(#{nth(nth($colorGroup, 2), 1)}), 10%); // this does not because it thinks its a string.  I tried unquote() but that didn't work, still thinks it's a string.
        }
    }
}

按钮.模块.scss

$primary: #ae9fec;
$secondary: #d19ac1;

$theme: (
    "primary": ($primary, white),
    "secondary": ($secondary, white)
);

@each $colorGroup in $theme {
    &[data-variant="#{nth($colorGroup, 1)}"] {
        background-color: #{nth(nth($colorGroup, 2), 1)}); // this works

        &:hover {
            background-color: darken(#{nth(nth($colorGroup, 2), 1)}), 10%); // this does not because it thinks its a string.  I tried unquote() but that didn't work, still thinks it's a string.
        }
    }
}

---

如果删除选择器规则中的插值（而不是选择器本身），则应按预期进行编译

这里有一个测试-我假设您将

@每个

循环嵌套在选择器中，或者在根

@处使用
>，因为基本级别规则不能包含这样的
&
字符-为您的规则集使用
.按钮
选择器：

/* variables.scss */
$primary: #ae9fec;
$secondary: #d19ac1;

$theme: (
    "primary": ($primary, white),
    "secondary": ($secondary, white)
);

/* Button.module.scss */
.button {
    @each $colorGroup in $theme {
        &[data-variant="#{nth($colorGroup, 1)}"] {
            background-color: nth(nth($colorGroup, 2), 1);

            &:hover {
                background-color: darken(nth(nth($colorGroup, 2), 1), 10%);
            }
        }
    }
}

编译后的代码如下所示：

.button[data variant=“primary”]{
背景色：#ae9fec；
}
.按钮[数据变量=“主”]：悬停{
背景色：#8a74e4；/*暗$primary*/
}
.按钮[数据变量=“辅助”]{
背景色：#d19ac1；
}
.按钮[数据变量=“辅助”]：悬停{
背景色：#c177ab；/*暗$secondary*/
}

我还删除了示例中的附加括号。
您还有一些附加括号。我清理了您的代码，下面是一个版本，它还测试您传递给
darken（）
的值。我希望你能从这里理解：@shawnpencer OP知道你在说什么（通过他在循环中的评论逐字说明罪魁祸首），但他在问如何通过将值从字符串转换为颜色来补救。考虑到我自己尝试了几次却没有得到，我也很想知道，虽然你对原始语法错误的看法是正确的。考虑到我甚至没有出于任何原因考虑删除该死的插值+1:DSame-不必要的插值是将值呈现为字符串。删除它修复了我的问题。谢谢