在 SCSS 中使用 HSLA 中的 CSS 变量 [英] Using CSS Variables in HSLA in SCSS

问题描述

所以我一直在尝试在 HSLA 中使用 CSS 变量.我需要保持相同的颜色，但只是改变不透明度.

//内容在这里

SCSS

:root {--颜色:332、61%、78%；}div {背景:hsla(var(--color), 0.5);}

https://codepen.io/sammiepls/pen/zLpvXY

所以我想我可以将 hsl 颜色保留在那里，并通过使用变量来更改悬停或诸如此类的不透明度.它有效，如果我只是使用普通 CSS.但是我正在使用 SCSS 并且它导致它失败，因为 SASS 有它自己的 HSL 函数，它需要三个值；我得到的错误基本上是没有足够的论据.有没有人解决它?我尝试在整个函数周围使用字符串插值 #{} 但它不起作用.

解决方案

嘿 我想你想在 SCSS 中做的是将整个函数视为一个字符串.这应该可以工作 background: #{hsla(var(--color), 0.5)} 将在 CSS 上输出为 background: hsla(var(--color), 0.5);

So I have been trying to use CSS variables in HSLA. I need to keep the same color, but just change the opacity.

<div>
// content here
</div>

SCSS

:root {
  --color: 332, 61%, 78%;
}

div {
  background: hsla(var(--color), 0.5);
}

https://codepen.io/sammiepls/pen/zLpvXY

So I thought I would be able to just keep the hsl color in there and change the opacity on hover or whatnot by using the variable. It works, if I'm just using plain CSS. But I am using SCSS and it's causing it to fail because SASS has it's own HSL function that's expecting three values; the error I get is basically not enough arguments. Has anyone gotten a way around it? I tried using string interpolation #{} around the whole function but it didn't work.

解决方案

Hey I think what your want to do in SCSS is to treat the whole function as a string. This should work background: #{hsla(var(--color), 0.5)} that would output on CSS as background: hsla(var(--color), 0.5);

这篇关于在 SCSS 中使用 HSLA 中的 CSS 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！