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

css使用变量

One of the best use cases for CSS Variables is theme creation. And by that, I don’t only mean changing themes for your entire app, as that’s probably not something you need to do very often. What’s more relevant is the ability to easily create component specific themes.

CSS变量的最佳用例之一是主题创建。 而且，这不仅意味着更改整个应用程序的主题，因为这可能不是您经常需要做的事情。 更相关的是轻松创建组件特定主题的能力。

This could, for example, be when you need to mark an e-commerce product as added to cart. Or perhaps your site has an admin section which includes a darker sidebar section.

例如，这可能是在您需要将电子商务产品标记为添加到购物车时。 或者，您的网站上有一个管理部分，其中包含一个较暗的侧栏部分。

CSS Variables enable you to do this in a simpler and more flexible way than was previously possible. In this article, I’ll explain exactly how.

CSS变量使您可以比以前更简单，更灵活的方式进行操作。 在本文中，我将确切说明操作方法。

I’ve also created a screencast about theme creation in my free 8-part CSS Variables course. If you’re interested in learning more about the course, check out this article.

我还在免费的8部分CSS变量课程中创建了有关主题创建的截屏视频。 如果您有兴趣了解有关该课程的更多信息，请查看本文 。

设置 (The setup)

We’ll be working with a portfolio site as an example. Our goal is to be able to feature one of the projects in our portfolio so that it stands out from the rest of the crowd. Technically, we’ll do this by adding a class to the specific item we want to feature.

我们将以一个投资组合网站为例。 我们的目标是能够突出我们投资组合中的一个项目，使其在其他人群中脱颖而出。 从技术上讲，我们将通过向要添加的特定项添加一个类来实现。

Here’s how the portfolio site looks initially:

以下是投资组合网站的外观：

I won’t bother talking about the HTML for the site, as it’s pretty straight forward, and I’m assuming that you know HTML. However, if you’re interested in fiddling around with the code, I’ve created a Scrimba playground for it here.

我不会为网站HTML烦恼，因为它很简单，我假设您知道HTML。 但是，如果您有兴趣修改代码，我在这里为此创建了一个Scrimba游乐场。

Now, let’s jump directly into the CSS. Here’s our stylesheet before we’ve started using CSS Variables:

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

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

h1, p {  
  color: #ff6f69;  
}

#navbar a {  
  color: #ff6f69;  
}

.item {  
  background: #ffcc5c;  
}

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

As you can see, we’re only using three colours here: #ffeead, #ff9f96 and #ffcc5c. However, we’re reusing them a lot. So this is a perfect use case for CSS Variables.

正如你所看到的，我们只在这里使用三种颜色： #ffeead ， #ff9f96和#ffcc5c 。 但是，我们经常重复使用它们。 因此，这是CSS变量的完美用例。

To start using it, we’ll first need to declare our variables. We’ll do that in the :root pseudo-class:

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

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

Then we’ll simply swap out our hexadecimal values with the variables:

然后，我们将简单地用变量换出十六进制值：

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);  
}

Now we have the power of variables in our CSS, meaning we can simply change the --red to something else, and it’ll be updated throughout our entire site.

现在，我们在CSS中有了变量的功能，这意味着我们可以简单地将--red更改为其他名称，并将在整个站点中对其进行更新。

If you’re struggling to understand what’s going on here, please check out my Learn CSS Variables in 5 minutes article, or enrol in the course.

如果您想了解这里发生的事情，请在5分钟内阅读我的学习CSS变量文章 ，或注册该课程。

创建一个主题 (Creating a theme)

Now let’s create the theme. We want the ability to add a .featured class to one of our four project items, and thereby make that item stand out from the rest. Specifically, we’ll be changing red to #ff5564 and yellow#ffe55b.

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

Here’s how it’ll look in the markup:

这是标记中的外观：

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

This change should affect the styling at four different places:

此更改应在四个不同位置影响样式：

• background color of the <div>

  <div>背景色

• color of the<h1>

  <h1>颜色

• background color of the <button>

  <button>背景色

• color of the <button>

  <button>颜色

旧的方式 (The old way)

The way we had to solve this previously was by creating a custom CSS selector for each element inside the .featured item, like this:

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

.featured {  
  background: #ffe55b;  
}

.featured > h1 {  
  color: #ff5564;  
}

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

This approach isn’t very flexible. If you were to add another element inside your portfolio items, you’d have to write specific selectors for them as well.

这种方法不是很灵活。 如果要在投资组合项目中添加另一个元素，则还必须为其编写特定的选择器。

新方法 (The new way)

With CSS Variables, however, it becomes much easier. We’ll simply override the variables inside the .featured a class like this:

但是，有了CSS变量，它变得更加容易。 我们将简单地覆盖.featured类中的变量，如下所示：

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

As CSS Variables are inherited, all the elements inside .featured which reference --red or--yellow now use the local values and not the global ones. So the <button> or <h1> elements automatically use the local values for the variables.

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

Here’s how it plays out on the page.

这是它在页面上的显示方式。

As you can see, the ‘project d’ item looks a bit different than the rest.

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

Neat, or what?

整洁，还是什么？

Just think about how this would be if we were building a more complex component, for example, a product item in an e-commerce app. It might include titles, sub-titles, paragraphs, images, captions, buttons, ratings and much more. It’s much easier and more flexible to simply flip the value of some variables instead of creating custom selectors for each of the descendants.

只需考虑一下，如果我们要构建一个更复杂的组件(例如，一个电子商务应用程序中的产品)，情况将会如何。 它可能包括标题，副标题，段落，图像，标题，按钮，等级等等。 只需翻转一些变量的值，而不是为每个后代创建自定义选择器，将更加容易和灵活。

If you’re interested in learning more about this technology, please check out my free 8-part interactive CSS Variables course on Scrimba.

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

---

---

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。

翻译自: https://www.freecodecamp.org/news/how-to-easily-create-themes-with-css-variables-2d0f4cfa5b9a/

css使用变量