Question

我想创建一个获取CSS变量，然后在该函数中返回新创建的SCSS变量的函数；

我这样做的原因是SASS函数不接受CSS变量。像变暗变亮...

例如

这是胡话

&--dropdown {
      list-style: none;
      position: absolute;
      width: 25rem;
      height: 15rem;
      background-color: myOwnDarkenFunc(var(--color-primary));

结果应该是（来自函数）：-$ color-primary

Answer 1

sass函数不接受css定制属性/ css变量的原因是sass被转译为css，因此在运行时无法访问。

尽管sass变量和函数仅在编译时存在，但css自定义属性在运行时存在。这就是为什么您可以通过JavaScript更改CSS自定义属性的原因。

据我所知，除了使用sass函数和sass变量来对在您的scss代码中某处进行硬编码的值使用仅在css语句和css函数（例如{{ 1}}或calc()。

仅查看您的代码，似乎您只是想使用sass函数使颜色更深。在这种情况下，您可以只使用css函数translate()并将自定义属性传递给它。这样，您可以在更改亮度值时轻松实现变暗效果：

hsl()

scss

如何使SCSS函数接收CSS变量并将其转换为SCSS变量然后返回

1 个答案: