css - 如何制作一个接收 CSS 变量并将其转换为 SCSS 变量然后返回它的 SCSS 函数

Question

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

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

例如

这就是sass

&--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 函数中使用 css 变量，如 calc() 或 translate()。

仅查看您的代码，您似乎只想使用 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>