后端开发教程 - Java、Spring Boot 实战 - msg200.com
CSS 变量速查表
介绍
宣言
示例用例
遗产
默认（后备）值
无效值
动态使用（JavaScript）
即将推出
进一步阅读
最初发表于devinduct。
介绍
CSS 变量是一个非常有用的功能，它使我们能够完成之前用 SASS 无法完成的任务。它们由 CSS 作者定义，包含特定的值，可以在项目中任何需要的地方重复使用。它们使用自定义符号，并可以通过var函数访问。
宣言
CSS 变量可以在任何元素上声明，我们可以像这样声明一个 CSS 变量：
div {
--primary-color: green;
}
可以使用以下函数访问它们var：
div {
color: var(--primary-color);
}
示例用例
让我们定义一个用例，其中我们在 HTML 中定义以下 CSS 规则：
.card-wrapper {
padding: 1rem;
display: flex;
flex-direction: column
}
.card {
border: 1px solid #0068d8;
margin-bottom: 0.5rem
}
.card-title {
padding: 1rem;
background-color: #007bff;
color: #fff
}
.card-body {
padding: 1rem;
background-color: #76b8ff;
color: #fff
}
并将它们应用到以下 HTML：
<section class="card-wrapper">
<article class="card">
<header class="card-title">
Card 1
</header>
<section class="card-body">
Lorem ipsum dolor sit amet...
</section>
</article>
<article class="card">
<header class="card-title">
Card 2
</header>
<section class="card-body">
Lorem ipsum dolor sit amet...
</section>
</article>
<article class="card">
<header class="card-title">
Card 3
</header>
<section class="card-body">
Lorem ipsum dolor sit amet...
</section>
</article>
</section>
你能发现重复的地方吗？分析完 CSS 代码后，我们发现以下属性是重复的：
- 填充
- 颜色
因此，我们可以利用新的 CSS 特性。我们可以使用 CSS 变量来定义元素的 padding 和 color。通过在伪类中声明它们，我们可以解决这个问题，并在需要的地方:root重用它们。更新后的 CSS 如下所示：paddingcolor
:root {
--primary-color: #fff;
--primary-padding: 1rem
}
.card-wrapper {
padding: var(--primary-padding);
display: flex;
flex-direction: column
}
.card {
border: 1px solid #0068d8;
margin-bottom: 0.5rem
}
.card-title {
padding: var(--primary-padding);
background-color: #007bff;
color: var(--primary-color)
}
.card-body {
padding: var(--primary-padding);
background-color: #76b8ff;
color: var(--primary-color)
}
HTML 保持不变，在浏览器中打开页面后，结果应该是相同的。
遗产
CSS 变量可以像其他 CSS 属性一样继承其值。如果元素上未设置变量值，则使用其父元素的值。让我们更新 CSS 以反映这一点：
:root {
--primary-color: #fff;
--primary-padding: 1rem
}
.card-wrapper {
padding: var(--primary-padding);
display: flex;
flex-direction: column
}
.card {
border: 1px solid #0068d8;
margin-bottom: 0.5rem
}
.card-title {
--primary-padding: 1.5rem;
--primary-color: red;
padding: var(--primary-padding);
background-color: #007bff;
color: var(--primary-color)
}
.card-body {
padding: var(--primary-padding);
background-color: #76b8ff;
color: var(--primary-color)
}
现在，如果我们在浏览器中运行该页面，结果应该是每个卡片标题的padding和分别color设置为1.5rem和red，而不是伪类中定义的值。这意味着除了卡片标题之外，:root所有元素都从父级（在本例中为伪类）继承了颜色和填充。:root
默认（后备）值
CSS 变量支持默认值或回退值，这意味着我们可以定义自定义 CSS 变量失效时使用的值。这可以通过将第二个参数传递给var函数来实现。当 CSS 变量未定义时，将使用给定的值作为替代值。让我们更新 CSS 代码来反映这一点：
:root {
/*--primary-color: #fff; a fallback value is used instead of this variable*/
--primary-padding: 1rem
}
.card-wrapper {
padding: var(--primary-padding, 1rem);
display: flex;
flex-direction: column
}
.card {
border: 1px solid #0068d8;
margin-bottom: 0.5rem
}
.card-title {
--primary-padding: 1.5rem;
--primary-color: red;
padding: var(--primary-padding, 1rem);
background-color: #007bff;
color: var(--primary-color, #fff)
}
.card-body {
padding: var(--primary-padding, 1rem);
background-color: #76b8ff;
color: var(--primary-color, #fff)
}
由于我们已将颜色定义为回退值，因此输出应该仍然相同white。稍微调整一下，看看效果。
无效值
如果 CSS 变量定义了无效值，浏览器将为给定的属性设置初始值或父值。
首先，它会检查该属性是否可继承，如果是，它会从父元素（如果该元素有父元素）获取值。如果该元素没有父元素，则会使用该属性的默认初始值。让我们更新卡片包装器和标题类来反映这种行为：
...
.card-wrapper {
padding: var(--primary-padding);
display: flex;
flex-direction: column;
color: orange /* assign a new color here */
}
.card-title {
--primary-padding: 1.5rem;
--primary-color: 1px; /* assign an invalid value here */
padding: var(--primary-padding, 1rem);
background-color: #007bff;
color: var(--primary-color, #fff)
}
...
现在，如果我们在浏览器中运行该页面，卡片标题的颜色将更改为orange
动态使用（JavaScript）
CSS 变量可以通过 JavaScript 动态访问。我们可以像其他属性一样获取或设置它的值：
const el = document.querySelector(':root');
// get the value
const padding = el.style.getPropertyValue('--primary-padding');
// set the value
el.style.setProperty('--primary-padding', '3rem');
即将推出
在下一篇关于 CSS 变量的文章中，我将介绍一个更实用的示例，并创建一个简单的主题切换器。记得关注我的博客，了解最新动态:)