如何创建一个 SCSS 函数，该函数接收 CSS 变量并将其转换为 SCSS 变量，然后返回它

Question

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

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

例如

这是屁股

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

结果应该是(来自函数(：- $color-主要

Answer 1

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

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

据我所知，除了对 scss 代码中某处硬编码的值使用 sass 函数和 sass 变量以及仅在 css 语句和 css 函数(如calc()或translate()(中使用 css 变量之外，您的问题没有通用的解决方案。

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

scss

:root {
--color-primary-h: 120;
--color-primary-s: 100%;
--color-primary-l: 25%; // 100% => white, 50% => normal, less than 50% => darker, 0% => black
}
.menu { // some example wrapper element for testing
&--dropdown {
list-style: none;
position: absolute;
width: 25rem;
height: 15rem;
background-color: hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l));
}
}

您可以使用如下所示的列表测试上述 SCSS 代码：

HTML

<ul class="menu--dropdown">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>