当前位置：首页 > article >正文

换肤-主题：使用 CSS 自定义属性 -- var()函数详解

article 2025/1/8 0:33:57

CSS 自定义属性是现代 CSS 中非常有用的功能，它允许开发者在样式表中创建可重用的值，从而提高样式表的可维护性和灵活性。通过 var() 函数，可以在 CSS 中定义变量，并在多个地方引用这些变量，甚至可以实现动态改变样式的效果。

因项目需要，做了一个主题切换，主题样式都是通过定义var()变量改变：

1. 什么是 CSS 自定义属性（变量）？

CSS 自定义属性是允许我们定义变量的功能，这些变量可以在 CSS 中的任何位置使用。与 JavaScript 中的变量不同，CSS 变量的作用域是基于 DOM 结构的。换句话说，变量可以被局部或全局使用，这取决于它们的声明位置。与传统的 CSS 样式表中直接写死的值不同，自定义属性可以在多个地方被引用和修改。CSS 自定义属性的定义以 -- 开头，且必须以 var() 函数来引用。

CSS 变量的声明语法如下：

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

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

在上面的例子中，--main-color 和 --font-size 是 CSS 自定义属性（变量），它们分别代表主色和字体大小。通过 var() 函数，我们在 body 元素中引用了这两个变量。

2. 如何定义和使用 CSS 变量？

2.1 定义 CSS 变量

CSS 变量的定义通常在 :root 选择器中进行，这样可以确保它们在全局范围内有效。-- 是定义自定义属性的前缀。

:root {
  --primary-color: #1abc9c;
  --secondary-color: #2ecc71;
  --font-family: 'Arial', sans-serif;
}

在这里，我们定义了三个变量：--primary-color、--secondary-color 和 --font-family，分别表示主色、副色和字体。

2.2 使用 `var()` 函数引用变量

一旦定义了 CSS 变量，就可以通过 var() 函数在任何需要的地方引用它们。

body {
  background-color: var(--primary-color);
  font-family: var(--font-family);
}

h1 {
  color: var(--secondary-color);
}

在这个例子中，background-color 和 font-family 使用了自定义变量，h1 元素使用了 --secondary-color 变量来设置颜色。

3. CSS 变量的作用域

CSS 变量是层叠的，这意味着它们的作用域是基于 DOM 结构的。变量的作用域可以是全局的，也可以是局部的。

3.1 全局作用域

当在 :root 中定义变量时，它们是全局的，可以在整个项目中使用。

:root {
  --global-color: #ff6347;
}

div {
  color: var(--global-color);
}

p {
  color: var(--global-color);
}

3.2 局部作用域

如果在特定的选择器中定义了变量，它们只会在该选择器内部生效。

.container {
  --local-color: #ff6347;
}

.container p {
  color: var(--local-color);
}

.container .title {
  color: var(--local-color);
}

在上面的例子中，--local-color 仅在 .container 元素内有效，其他地方无法访问。

4. CSS 变量的默认值

声明了 CSS 自定义属性之后，在使用 var() 时，可以为变量提供一个默认值，如果该变量未定义或者无法找到时，CSS 会使用这个默认值。这可以防止页面渲染时因缺少变量而导致的错误。var() 函数接受两个参数：

必需的参数：引用 CSS 变量名。
可选的默认值：如果变量未定义或不可用，使用此默认值。

div {
  color: var(--undefined-color, #333);  /* 如果 --undefined-color 未定义，使用 #333 */
}

在这个例子中，如果 --undefined-color 没有定义，color 属性会使用默认的 #333 值。

5. 动态改变 CSS 变量

CSS 变量不仅可以在静态样式表中使用，还可以在 JavaScript 中动态地修改。这使得开发者可以通过 JavaScript 实现动态主题切换、响应式设计和交互式样式调整等功能。

5.1 在 JavaScript 中修改 CSS 变量

可以通过 style.setProperty() 方法动态更改 CSS 变量。

document.documentElement.style.setProperty('--primary-color', '#9b59b6');

这行代码会把全局变量 --primary-color 的值修改为 #9b59b6。

或者CSS修改(鼠标移入按钮，改变变量)

button:hover {
  --primary-color: #3498db;  /* 修改变量 */
}

5.2 实现主题切换

例如，通过 JavaScript 和 CSS 变量，你可以实现一个简单的主题切换功能。

<button onclick="toggleTheme()">切换主题</button>

<style>
  :root {
    --background-color: white;
    --text-color: black;
  }

  body {
    background-color: var(--background-color);
    color: var(--text-color);
  }
</style>

<script>
  function toggleTheme() {
    const currentBackground = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();
    if (currentBackground === 'white') {
      document.documentElement.style.setProperty('--background-color', '#333');
      document.documentElement.style.setProperty('--text-color', '#fff');
    } else {
      document.documentElement.style.setProperty('--background-color', 'white');
      document.documentElement.style.setProperty('--text-color', 'black');
    }
  }
</script>

点击按钮后，toggleTheme() 函数会动态切换 --background-color 和 --text-color 变量，从而实现白天/黑夜主题的切换。

6. CSS 变量的继承、计算和媒体查询使用

CSS 变量支持继承和计算，可以利用数学表达式来操作变量的值，增强样式的灵活性。

6.1 继承

当一个元素没有定义某个 CSS 变量时，它会从父元素继承该变量的值。

:root {
  --base-padding: 10px;
}

.container {
  padding: var(--base-padding);
}

.card {
  padding: var(--base-padding);  /* 继承自 .container */
}

6.2 计算

可以在 CSS 变量中使用计算，比如通过 calc() 函数来计算尺寸。

:root {
  --base-size: 20px;
}

.element {
  width: calc(var(--base-size) * 2);
  height: calc(var(--base-size) + 10px);
}

在上面的例子中，--base-size 被用在 calc() 函数中进行计算，产生更灵活的布局。

6. 3 CSS 变量与媒体查询结合使用

CSS 变量非常适合和媒体查询一起使用，能够帮助你轻松地创建响应式设计。你可以在不同的屏幕尺寸下，修改变量的值以实现不同的布局或主题。

:root {
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}

@media (max-width: 600px) {
  :root {
    --font-size: 14px; /* 在小屏幕下修改字体大小 */
  }
}