有没有办法将 SASS lighten() 和 darken() 与 CSS 变量一起使用？ [重复]

Question

有没有技巧或方法可以将 Sass lighten() 和 darken() 与 CSS 变量一起使用？ （我必须使用css变量）

//.scss

    :root{
        --my-color: #ff0000;
    }
    
    // method 1 :
    $my-color-darken: darken(var(--my-color), 15%); // not working
    
    // method 2 :
    $my-color: var(--my-color);
    $my-color-lighten: lighten($my-color, 15%); // not working

Answer 1

不幸的是这是不可能的。原因是 css 变量在运行时工作，而 sass 是在编译时构建的。在这种情况下，我建议使用 sass 变量。您已经在使用它，因此如果您再使用其中一项功能也没关系。最重要的是，不使用 css 变量将提高浏览器兼容性。

如果您仍然想在大多数应用程序中使用 css 变量。你可以做这样的事情：

$my-color: #ff0000;
$my-color-darken: darken($my-color, 15%);


:root{
    --my-color: $my-color;
    --my-color-darken: $my-color-darken;
}