时间戳

首页 > 解决方案 > 使用 CSS 变量和 Sass 混合在一起而不使用 Sass 变量

css - 使用 CSS 变量和 Sass 混合在一起而不使用 Sass 变量

问题描述

我想用户var(--darkGrey). 到目前为止，我已经尝试过：

$grey: #ddd; // I'd like to remove this line
:root {
  --grey: #ddd;
  --darkGrey: darken($grey, 55%); // doesn't fail but doesn't work
  --darkGrey: darken(#ddd, 55%); // doesn't fail but doesn't work
  --darkGrey1: #{darken($grey, 55%)}; // works but I don't like having a Sass var
  --darkGrey2: #{darken(var(--grey), 55%)}; // fails: "var(--grey)" is not a color for `darken'
  --darkGrey3: #{darken(#ddd, 55%)}; // works but I'd need to use a css var. I have plenty of colors and references
}

标签： csssass

解决方案

我想说在 Sass 函数中使用 CSS 自定义属性（变量）没有多大意义。CSS 自定义属性可以在您的 CSS 结构中甚至在运行时进行更深入的更改，而 Sass 仅在编译时可用。它无法对这种变化做出反应。

看看hsla()CSS 函数，它可以用来在运行时改变颜色的亮度。请参阅文章https://sparanoid.com/note/css-variables-guide/。

推荐阅读