Question

我正在尝试使用darken sass函数，但是当我从scss模块中的sass对象读取时，它认为颜色实际上是字符串，因此该函数无法解析传入的变量。 / p>

variables.scss

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

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

Button.module.scss

@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.
        }
    }
}

Answer 1

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

这是一个测试-我假设您将@each循环嵌套在选择器中或使用@at-root，因为基本级规则不能包含这样的&字符-为您的规则集使用.button选择器：

/* 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"] {
  background-color: #ae9fec;
}

.button[data-variant="primary"]:hover {
  background-color: #8a74e4; /* Darkened $primary */
}

.button[data-variant="secondary"] {
  background-color: #d19ac1;
}

.button[data-variant="secondary"]:hover {
  background-color: #c177ab; /* Darkened $secondary */
}

在示例中，我也删除了多余的括号。

使用色彩对象时，SASS功能变暗和变亮不起作用

1 个答案: