我想创建一个获取CSS变量,然后在该函数中返回新创建的SCSS变量的函数;
我这样做的原因是SASS函数不接受CSS变量。像变暗变亮...
例如
这是胡话
&--dropdown {
list-style: none;
position: absolute;
width: 25rem;
height: 15rem;
background-color: myOwnDarkenFunc(var(--color-primary));
结果应该是(来自函数):-$ color-primary
答案 0 :(得分:0)
sass函数不接受css定制属性/ css变量的原因是sass被转译为css,因此在运行时无法访问。
尽管sass变量和函数仅在编译时存在,但css自定义属性在运行时存在。这就是为什么您可以通过JavaScript更改CSS自定义属性的原因。
据我所知,除了使用sass函数和sass变量来对在您的scss代码中某处进行硬编码的值使用仅在css语句和css函数(例如{{ 1}}或calc()
。
仅查看您的代码,似乎您只是想使用sass函数使颜色更深。在这种情况下,您可以只使用css函数translate()
并将自定义属性传递给它。这样,您可以在更改亮度值时轻松实现变暗效果:
hsl()
scss