在HTML5中，如何将Sass变量与数据属性一起使用

我试图在滚动时改变背景颜色，因此我需要在HTML标记中使用

data bg

属性，如下所示：

<div class="section" data-bg="#ccff00">

如何使用SCSS/Sass变量而不是十六进制代码？例如：

<div class="section" data-bg="$background-color">

---

因此，当我更改变量时，此颜色也会更改，而无需更改HTML标记。

您可以将变量添加到

：root

选择器中（如Bootstrapdo），
并将其与

css

函数

var（）

一起使用

如果要使用

jQuery

获取值：

jQuery（':root'）.css（'--bg color'）；

：根目录{
--背景颜色：#f00；
--文字颜色：#0f0；
}
部分{
高度：100px；
颜色：var（--文本颜色）；
背景色：var（--bg色）；
}

乱数假文。。。

不，不能直接在数据属性中使用sass变量，但有一种间接的方法。 通过这种方式，您还可以将变量从暗变为亮，并将颜色从红色变为绿色

但这两者都应该像我一样在你的数据背景中声明。看看这个例子

[data bg='dark']{
--文字颜色：红色；
}
[数据bg='light']{
--文字颜色：绿色；
}
div{
颜色：var（--文本颜色）；
}

测试绿色
测试红色

数据bg属性的实例您可以使用style属性存储变量。 在html中：

---

好吧，你不能。Sass编译为CSS，因此任何变量都会本地化到您的Sass文件中。你可以尝试一种新的方法，但这样做可能会有点混乱。显然，你的JavaScript代码不使用CSS（至少不是通常的方式），因此很难与CSS预处理器集成。它是第三方库还是你可以修改的东西？因为最干净的方法是分配类而不是硬编码的颜色。我知道其中涉及JavaScript，而脚本实际上没有使用CSS。我添加了一个

jQuery

示例。是的，涉及JS:document.body.style.background=window.sections[0]。getAttribute（'data-bg'）；

:root {
  --bg-color: $background-color;
  --text-color: $text-color;
}

<div class="section" style="--data-bg:#ccff00">

.section{
  $bg: var(--data-bg);
  width: 200px;
  height: 200px;
  background: $bg;
}