【揭秘CSS自定义属性】变量使用技巧与实战案例解析

一、什么是CSS自定义属性

CSS自定义属性，也被称为CSS变量，是一种容许开辟者定义跟复用值的机制。它容许我们在CSS中创建本人的变量，并在全部文档或特定部分中反复利用这些变量。这种机制进步了款式的可保护性跟可读性。

二、背景

在CSS中，我们常常须要反复利用雷同的值，如色彩、字体大小、边距等。这些值被称为“把戏数字”，它们缺乏语义，不易于管理跟保护。CSS自定义属性的呈现，使得我们可能将这些值定义为变量，从而简化代码并进步可保护性。

三、感化

进步代码可读性：利用有意思的变量名调换把戏数字，使代码更易于懂得跟保护。
简化款式修改：只有在一个处所修改变量的值，全部利用该变量的款式都会主动更新。
加强复用性：可能在差其余CSS规矩会合复用雷同的变量值。

四、利用方法

4.1 申明

CSS变量的申明利用两个连字符（–）扫尾，前面跟着属性名跟冒号，再跟上属性值。平日在:root伪类中抉择器下申明全局变量。

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
}

4.2 利用

利用var()函数来引用CSS变量。可能将变量值作为任何CSS属性的值。

body {
  background-color: var(--main-color);
  color: var(--secondary-color);
}

4.3 默许值

可能为CSS变量设置默许值，以便在变量不决义时利用。

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

4.4 感化域

CSS变量存在感化域，平日在定义它们的元素及其子元素中可用。假如在一个元素内重新定义一个变量，那么该新值将仅在该元素及其子元素内有效。

4.5 空格尾随特点

CSS变量存在空格尾随特点，这意味着变量名后可能跟一个空格。

--main-color: #3498db;

body {
  background-color: var(--main-color );
}

4.6 共同calc方法利用

CSS变量可能与calc()函数一同利用，停止打算。

--gap: 20;
.foo {
  margin-top: calc(var(--gap) / 2);
}

4.7 行内style属性中利用

CSS变量也可能生手内style属性中利用。

<div style="--main-color: #3498db;">...</div>

4.8 在JavaScript中操纵

可能利用JavaScript静态修改CSS变量。

document.documentElement.style.setProperty('--main-color', '#e74c3c');

五、主题变更实例

以下是一个利用CSS变量的主题变更实例：

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
}

body {
  background-color: var(--main-color);
  color: var(--secondary-color);
}

.button {
  background-color: var(--main-color);
  color: white;
}

.button:hover {
  background-color: darken(var(--main-color), 10%);
}

<div class="button">点击我</div>

在这个例子中，我们定义了全局变量--main-color跟--secondary-color，并在差其余CSS规矩会合利用它们。我们还演示了怎样利用JavaScript静态修改--main-color变量的值。

经由过程利用CSS自定义属性，我们可能轻松地创建可保护、可复用的款式，并实现主题变更等高等功能。