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

【问题标题】：Is there a way to use SASS lighten() and darken() with CSS variables? [duplicate]有没有办法将 SASS lighten() 和 darken() 与 CSS 变量一起使用？ [复制]
【发布时间】：2021-02-12 03:26:32
【问题描述】：

有没有一种技巧或方法可以将 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

【问题讨论】：

标签： css sass css-variables

【解决方案1】：

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

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

$my-color: #ff0000;

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

$my-color-darken: darken($my-color, 15%); // not working

【讨论】：