认识

2025年01月15日

柏拉文

越努力，越幸运

一、认识

---

CSS Variables，又称为 CSS Custom Properties，是 CSS 中的一项强大功能，允许你在 CSS 中定义可重用的值并将其引用。这些变量使得 CSS 样式表更加动态、灵活和易于维护。通过 CSS 变量，你可以在多个地方使用相同的值，而不需要重复编写，便于集中管理样式的更改。

二、语法

---

CSS 变量使用 -- 语法进行定义，接着可以在样式中通过 var() 函数来引用这些变量。定义的变量是具有作用域的，可以局部定义，也可以全局定义。

2.1 声明变量

根元素 :root 声明变量: 通常的最佳实践是定义在根伪类 :root 下，这样就可以在 HTML 文档的任何地方访问到它了。如果变量定义在 :root 选择器中，表示它是全局变量，可以在整个 CSS 文件中使用。

:root {
  --main-bg-color: brown;
}

普通元素 element 声明变量: 如果变量定义在某个特定的元素或选择器下，它只能在该元素及其后代元素中使用。

element {
  --main-bg-color: brown;
}

2.2 使用变量

使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值。 var() 函数可以定义多个 备用值（fallback value），当给定值未定义时将会用备用值替换。

element {
  background-color: var(--main-bg-color);
}

element1 {
  background-color: var(--main-bg-color, red); // 如果 --main-bg-color 没有定义, 则使用红色
}

2.3 操作变量

根元素 root 操作变量:

// 获取一个 Dom 节点上的 CSS 变量
document.documentElement.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(document.documentElement).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
document.documentElement.style.setProperty("--my-var", jsVar + 4);

普通元素 element 操作变量:

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

三、用法

---

3.1 Css 声明变量、使用变量

:root{
    --color-link: #1677ff;
    --color-bg-base: #fff;
    --color-primary: #1677ff;
    --color-success: #52c41a;
    --color-warning: #faad14;
}


.app{
    width: 800px;
    height: 800px;
    background-color: var(--color-primary, blue);
}

3.2 Css 声明、预设变量、使用变量

Css 中预设主题模式: 预设明亮和暗黑主题

:root{
    --color-link: #1677ff;
    --color-bg-base: #fff;
    --color-primary: #1677ff;
    --color-success: #52c41a;
    --color-warning: #faad14;
}

[data-theme="light"]{
    --color-link: #1677ff;
    --color-bg-base: #fff;
    --color-primary: #1677ff;
    --color-success: #52c41a;
    --color-warning: #faad14;
}

[data-theme="dark"]{
    --color-link: #d9363e;
    --color-bg-base: #fff;
    --color-primary: black;
    --color-success: #52c41a;
    --color-warning: #faad14;
}

JavaScript 动态切换主题

document.documentElement.setAttribute('data-theme', "light");

3.3 JavaScript 声明变量、 Css 使用变量

JavaScript 声明变量

function cssVars(params: {
  element?: HTMLElement;
  variables: Record<string, string | number>;
}): void {
  const { element = document.documentElement, variables } = params;

  Object.keys(variables).forEach((variable) => {
    element.style.setProperty(variable, String(variables[variable]));
  });
}

useEffect(() => {
    cssVars({
      variables: {
        "--color-link": "#1677ff",
        "--color-bg-base": "#fff",
        "--color-primary": "#1677ff",
        "--color-success": "#52c41a",
        "--color-warning": "#faad14",
      },
    });
  }, []);

Css 使用变量

.app{
    width: 800px;
    height: 800px;
    background-color: var(--color-primary, blue);
}