CSS 【详解】自定义属性（又名 CSS 变量）

自定义属性（Custom Properties），也被称为CSS变量或CSS变量，是CSS中的一个强大特性，允许你创建可以在整个样式表中重复使用的值。

1. 定义和使用变量

在CSS中，自定义属性以--开头，可以在:root伪类中定义，这样可以确保在整个文档中都可以访问到。

:root {
  --main-bg-color: coral;
  --main-text-color: #333;
}
 
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

在上面的例子中，我们定义了两个变量--main-bg-color和--main-text-color，然后在body选择器中使用它们。

2. 变量的回退

如果变量不存在，那么CSS属性会使用一个指定的回退值。

body {
  background-color: var(--main-bg-color, #fff);
  color: var(--main-text-color, blue);
}

在上面的例子中，如果--main-bg-color或--main-text-color变量没有定义，那么background-color会回退到#fff，color会回退到blue。

3. 使用JavaScript操作变量

JavaScript可以使用getPropertyValue()和setProperty()方法来获取和设置自定义属性的值。

// 获取变量值
var bgColor = getComputedStyle(document.documentElement).getPropertyValue('--main-bg-color');
 
// 设置变量值
document.documentElement.style.setProperty('--main-bg-color', 'green');

在上面的例子中，我们首先获取了--main-bg-color变量的值，然后将其设置为green。

4. 使用Sass/Less等预处理器

虽然CSS变量本身非常强大，但是在实际项目中，可能需要结合CSS预处理器来更好地管理和维护变量。

$main-bg-color: coral;
$main-text-color: #333;
 
:root {
  --main-bg-color: $main-bg-color;
  --main-text-color: $main-text-color;
}
 
body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

在上面的Sass例子中，我们首先定义了两个变量$main-bg-color和$main-text-color，然后在:root中将它们转换成CSS变量。这样，我们就可以在整个Sass样式表中重复使用这些变量了。