css 变量

不借助 Sass，CSS 也支持变量了!不需要预处理器也不再需要编译

:root {
  /* 1. Defining in Global Scope */
  --color: red;

  /* 2. Available in all selector*/
  color: var(--color); /* red */
}

.local {
  /* 1. Defining in Local Scope */
  --color: blue;

  /* 2. Scoped to the .local class only */
  color: var(--color); /* blue */
}

支持非常多的 css 属性

下面列出一部分的用法：

:root {
  --color: red
  --margin: 10px 20px;
  --value: 5;
  --border: var(--border-width) solid #000;
}

div {
  color: var(--color)
  margin: var(--margin);
  padding: calc(var(--value) * 1px); /* 5px */
  border: var(--border);
}

在 JS 中使用 CSS 变量

获取 CSS 变量

使用 getPropertyValue() 获取变量

获取行内定义变量

<p style="--color: red"></p>

// Get our <p> element
const element = document.querySelector('p');

// Retrieve our CSS variable "--color"
element.style.getPropertyValue('--color'); // 'red'

获取css标签定义变量

<style>
  p {
    --color: red;
  }
</style>

// Get our <p> element
const element = document.querySelector('p');

// Retrieve our CSS variable "--color"
element.style.getPropertyValue('--color'); // 'red'

获取全局变量

:root {
  --color: red;
}

getComputedStyle(document.documentElement).getPropertyValue('--color'); // "red"

设置 CSS 变量

使用 setProperty 设置变量

// Get our <p> element
const element = document.querySelector('p');

// Set our "--color" variable to be "blue"
element.style.setProperty('--color', 'blue');

简单示例

<p style="--color:red; color: var(--color)"></p>

// Get our <p> element
const element = document.querySelector('p');

// On click, change text from "red" to "blue"
element.addEventListener('click', function() {
  element.style.setProperty('--color', 'blue');
});

实例

facebook 的 css 变量使用

CSS 变量是在 class 下定义的，当该类应用于DOM元素时，它的值将应用于其DOM子树中的样式。这让我们可以将主题组合到一个样式表中，这意味着切换不同的主题不需要重新加载页面，不同的页面可以有不同的主题而无需下载额外的CSS，不同的产品可以在同一页面上并排使用不同的主题

.light-theme {
  --card-bg: #eee;
}
.dark-theme {
  --card-bg: #111;
}
.card {
  background-color: var(--card-bg);
}