有没有办法将SASS lighten和darken与CSS变量一起使用？

问题描述

是否有技巧或方法将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是在编译时构建的。在这种情况下，我建议使用sass变量。您已经在使用它，因此，如果再使用其中一项功能，则无所谓。最重要的是，不使用css变量将改善浏览器的兼容性。

在大多数应用程序中仍要使用css变量的情况下。您可以执行以下操作：

<Link
  to="/"
  {/* This assumes the `active` class is defined in your CSS */}
  activeClassName="active"
>