sass - 在 SCSS 中使用 HSLA 中的 CSS 变量
问题描述
所以我一直在尝试在 HSLA 中使用 CSS 变量。我需要保持相同的颜色,但只需更改不透明度。
<div>
// content here
</div>
SCSS
:root {
--color: 332, 61%, 78%;
}
div {
background: 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);
推荐阅读
- html - 仅适用于 max-height CSS 的更好动画
- java - 使用 Spring Boot 和 Jackson ObjectMapper 时 OffsetDateTime 属性 JSON 序列化的区别
- amazon-route53 - 弹性 IP 与 AWS EC2 实例一起使用,但 Route 53 无法解析域名
- python - 无法在 django 项目中的模板文件夹上呈现 html 页面?
- go - 在 html 代码 Goland IDE 中禁用 sql 语法高亮
- csv - 如何在颤振中打开 CSV 文件?
- bash - 使用 curl 或 wget 下载并启动 sh.x 和 .run 文件
- java - Spring Boot unit test runs the whole program
- c++ - 基类成员初始化
- java - 按Java地图列表中的动态列数分组