如何使用 CSS 变量轻松创建主题

CSS 变量的最佳用例之一是创建主题。我指的不仅仅是更改整个应用的主题，因为这可能不是你需要经常做的事情。更重要的是，它能够轻松地创建特定于组件的主题。

例如，当您需要将某件电商产品标记为已添加到购物车时，或者您的网站管理部分包含一个颜色较深的侧边栏时，这种情况就可能发生。

CSS 变量让你能够以比以前更简单、更灵活的方式实现这一点。在本文中，我将详细解释如何实现。

我还在我的免费 8 部分 CSS 变量课程中创建了有关主题创建的截屏视频。

设置

我们将以一个作品集网站为例。我们的目标是展示作品集中的某个项目，使其从众多项目中脱颖而出。具体来说，我们会通过为想要展示的项目添加一个类来实现。

投资组合网站的初始外观如下：

我不会费心讨论网站的 HTML，因为它非常简单，而且我假设你懂 HTML。不过，如果你有兴趣摆弄一下代码，我在这里创建了一个 Scrimba 游乐场。

现在，让我们直接进入 CSS。这是我们开始使用 CSS 变量之前的样式表：

html, body {  
  background: #ffeead;  
  color: #ff6f69;  
}

h1, p {  
  color: #ff6f69;  
}

#navbar a {  
  color: #ff6f69;  
}

.item {  
  background: #ffcc5c;  
}

button {  
  background: #ff6f69;  
  color: #ffcc5c;  
}

如你所见，我们这里只使用了三种颜色：#ffeead、#ff9f96和#ffcc5c。然而，我们经常重复使用它们。所以，这非常适合使用 CSS 变量。

要开始使用它，我们首先需要声明变量。我们将在 :root伪类中执行此操作：

:root {  
  --red: #ff6f69;  
  --beige: #ffeead;  
  --yellow: #ffcc5c;  
}

然后我们只需用变量替换十六进制值：

html, body {  
  background: var(--beige);  
  color: var(--red);  
}

h1, p {  
  color: var(--red);  
}

#navbar a {  
  color: var(--red);  
}

.item {  
  background: var(--yellow);  
}

button {  
  background: var(--red);  
  color: var(--yellow);  
}

现在我们在 CSS 中拥有变量的功能，这意味着我们可以简单地将其更改--red为其他内容，它就会在整个网站中更新。

如果您很难理解这里发生的事情，请查看我的“5 分钟内学习 CSS 变量”文章，或报名参加课程。

创建主题

现在让我们创建主题。我们希望能够 .featured为四个项目项之一添加一个类，从而使该项目从其他项目中脱颖而出。具体来说，我们将把 red 更改为#ff5564yellow #ffe55b。

它在标记中看起来如下：

<div class="item **featured**">  
  <h1>project d</h1>  
  <button>learn more</button>  
</div>

此更改将影响四个不同地方的样式：

• 背景颜色<div>
• 颜色<h1>
• 背景颜色<button>
• 颜色<button>

旧方法

我们之前解决这个问题的方法是为 .featured项目内的每个元素创建一个自定义 CSS 选择器，如下所示：

.featured {  
  background: #ffe55b;  
}

.featured > h1 {  
  color: #ff5564;  
}

.featured > button {  
  background: #ff5564;   
  color: #ffe55b;  
}

这种方法不太灵活。如果你要在投资组合项目中添加其他元素，你也必须为它们编写特定的选择器。

新方法

.featured然而，有了 CSS 变量，这一切就变得简单多了。我们只需像这样在类中覆盖变量即可 ：

.featured {  
  --yellow: #ffe55b;  
  --red: #ff5564;  
}

.featured由于 CSS 变量是继承的，所有引用--red或 的元素 --yellow现在都使用本地值而不是全局值。因此<button>或<h1>元素会自动使用变量的本地值。

以下是其在页面上的呈现方式。

如您所见，“项目 d”项目看起来与其他项目略有不同。

很整洁，不是吗？

试想一下，如果我们构建一个更复杂的组件，例如电商应用中的产品项，会是什么样子。它可能包含标题、副标题、段落、图片、说明文字、按钮、评分等等。相比为每个子组件创建自定义选择器，直接翻转某些变量的值要简单得多，也更灵活。

如果您有兴趣了解有关这项技术的更多信息，请查看我在 Scrimba 上的免费8 部分交互式 CSS 变量课程。

感谢阅读！我叫 Per，是Scrimba的联合创始人，我热爱帮助人们学习新技能。如果您想及时收到新文章和资源的通知，请在Twitter上关注我。