CSS 自定义属性 - 备忘单

这篇笔记最初发布在我的DevNotes上

CSS 自定义属性，也称为 CSS 变量。表示可以在 CSS 中声明和调用的自定义属性。

在 CSS 中声明自定义属性

要在 CSS 中声明自定义属性，您需要使用以下--语法：

:root {
  --colorPrimary: hsla(360, 100%, 74%, 0.6);
}

注意:root伪类选择器，我们可以使用它来全局声明变量。我们也可以使用其他选择器来声明它们，然后它们将限定在这些选择器的作用域内。

.theme-dark {
  --colorPrimary: hsla(360, 100%, 24%, 0.6);
}

在 CSS 中使用自定义属性

要在 CSS 中使用 CSS 自定义属性，您可以使用var()函数

:root {
  --colorPrimary: tomato;
}

.theme-dark {
  --colorPrimary: lime;
}

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

在这种情况下，body背景颜色为tomato。body.theme-dark但是lime。

使用不带单位的自定义属性

如果与函数一起使用，CSS 自定义属性可以不带单位进行声明calc()。

:root {
  --spacing: 2;
}

.container {
  padding: var(--spacing) px; /*Doesn't Work 😫*/
  padding: calc(var(--spacing) * 1rem); /*Will output 2rem 😃*/
}

使用 JavaScript 自定义属性

要获取自定义属性，我们可以使用以下命令：

getComputedStyle(element).getPropertyValue("--my-var");

// Or if inline
element.style.getPropertyValue("--my-var");

要更新自定义属性值：

element.style.setProperty("--my-var", newVal);

获取和替换值的示例：

在以下示例中，我们使用dat.gui 控制器库--scenePerspective来更改、--cubeRotateY、自定义属性的值--cubeRotateX。此方法使应用新样式变得更加容易，因为不必在每个 Dom 元素上都应用内联样式。

资源

鏂囩珷鏉ユ簮锛�https://dev.to/vinceumo/css-customs-properties---cheatsheet-4iec