如何在 HTML5 中使用具有數據屬性的 Sass 變量

Question

我試圖在滾動時實現背景顏色更改，因此我需要在我的 HTML 標記中使用這樣的data-bg屬性：

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

如何使用 SCSS/Sass 變量而不是十六進制代碼？ 例如：

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

因此，當我更改變量時，此顏色也會更改，而無需更改 HTML 標記。

Answer 1

不，您不能直接在數據屬性中使用 sass 變量，但有一種間接的方法可以做到這一點。 通過這種方式，您也可以將 Variable 從暗更改為亮，並將顏色從紅色更改為綠色。

但是這兩者都應該像我一樣在你的 data-bg 中聲明。 請參閱此示例。

 [data-bg='dark']{ --text-color: red; } [data-bg='light']{ --text-color: green; } div { color: var(--text-color); }

 <div data-bg="light"> testing green</div> <div data-bg="dark"> testing red</div>

Answer 2

您可以將變量添加到:root選擇器中（就像Bootstrap那樣），
並將其與css函數var() 。

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

如果要使用jQuery獲取值：

jQuery(':root').css('--bg-color');

 :root { --bg-color: #f00; --text-color: #0f0; } section { height: 100px; color: var(--text-color); background-color: var(--bg-color); }

 <section> Lorem ipsum ... </section>

Answer 3

data-bg 屬性的一個實例，你可以使用 style 屬性來存儲變量。 在 HTML 中：

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

在 scss 中：

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