css变量是什么

CSS 变量（也称为自定义属性）是 CSS 中用于定义可重用值的特性。它们使用 -- 前缀定义，可以在整个样式表中被引用和复用，从而提高代码的灵活性和可维护性。

1. 定义 CSS 变量

CSS 变量通常在 :root 选择器中定义，这样它们可以在整个文档中使用：

1
2
3
4
5
:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --spacing: 1rem;
}
  • 以上定义的 --primary-color、--font-size 和 --spacing 就是 CSS 变量。

2. 使用 CSS 变量

CSS 变量使用 var() 函数进行引用：

1
2
3
4
5
button {
  background-color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

在这里，var(--primary-color) 引用了之前定义的变量 --primary-color 的值。

3. 动态修改变量

CSS 变量的强大之处在于可以通过 JavaScript 动态修改变量的值，轻松实现主题切换等效果：

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

通过这段代码，可以在运行时改变 --primary-color 的值，从而使得所有引用此变量的地方颜色发生变化。

4. CSS 变量的优势

  • 提高代码可维护性：只需修改变量值，就可以统一地改变样式。
  • 支持主题切换：可以通过改变变量来动态更新页面主题。
  • 作用域灵活：CSS 变量可以在特定选择器中定义，具有特定的作用域。

5. CSS 变量的兼容性

CSS 变量在现代浏览器中支持较好，但在一些老版本浏览器（如 IE）中不支持。

:root是什么

:root 是一个CSS伪类选择器，主要用于选择文档的根元素。在HTML文档中，根元素通常是 <html> 标签。使用 :root 选择器可以方便地设置全局CSS变量或样式。以下是一些关于 :root 的关键点：

1. 选择文档的根元素

  • :root 选择器选择的是文档的根元素，这在HTML中对应于 <html> 标签。
  • 例如，以下CSS代码将选择根元素并应用样式：
    1
    2
    3
    4
    :root {
        --main-color: #3498db; /* 定义CSS变量 */
        font-size: 16px;
    }

2. CSS变量的定义

  • :root 是定义CSS变量的常见位置。由于 :root 选择器具有更高的优先级，使用它可以确保变量在整个文档中都可以被访问到。
  • 定义在 :root 中的变量可以在后续的CSS规则中使用：
    1
    2
    3
    4
    5
    6
    7
    :root {
        --primary-color: #3498db;
    }

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

3. 全局样式

  • 使用 :root 可以设置全局样式或CSS变量，使得样式更加统一和可维护。
  • 在项目中，如果你希望有一个地方集中管理主题颜色、字体大小等，可以通过 :root 实现。

4. 与其他选择器的组合

  • :root 可以与其他选择器组合使用，从而针对特定条件应用样式。例如：
    1
    2
    3
    4
    :root.dark-mode {
        --background-color: #333;
        --text-color: #fff;
    }

示例

以下是一个完整的例子，展示如何使用 :root 定义和使用CSS变量：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
:root {
    --primary-color: #3498db;
    --font-size: 16px;
}

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

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

在这个例子中，我们在 :root 中定义了两个变量：--primary-color 和 --font-size，然后在 body 和 h1 元素中使用了这些变量。

总结

:root 是一个强大的工具，用于定义全局CSS变量和样式，方便维护和管理样式。它帮助开发者在整个文档中实现一致的设计。