非交互式登录 环境变量_在此免费的交互式课程中学习CSS变量

非交互式登录 环境变量

CSS Variables is an exciting new technology for modern browsers. It brings the power of variables to CSS, which results in less repetition, better readability, and more flexibility.

CSS变量是现代浏览器的一项令人兴奋的新技术。 它为CSS带来了变量的功能，从而减少了重复，提高了可读性，并提高了灵活性。

To help you get started, I’ve created a free course on CSS Variables at Scrimba.

为了帮助您入门，我在Scrimba创建了一个免费CSS变量课程。

This is a continuation of our series of free CSS courses. Previously, we’ve launched courses on CSS Grid and Flexbox. Combined, they’ve gotten well over 20K enrollments.

这是我们一系列免费CSS课程的延续。 以前，我们已经开设了有关CSS Grid和Flexbox的课程。 加起来，他们的注册人数已超过2万。

课程结构 (The course structure)

The course contains 8 interactive screencasts. They’re all between 3–6 minutes long, as my goal is to teach you CSS Variables as quickly as possible. At the end of some of them, I’ll give you a challenge, and encourage you to play with the code interactively. This can be done directly in the browser, as Scrimba screencasts make this possible.

该课程包含8个交互式截屏视频。 它们全都在3到6分钟之间，因为我的目标是尽快教会您CSS变量。 在其中一些结尾处，我将给您一个挑战，并鼓励您以交互方式使用代码。 可以直接在浏览器中完成此操作，因为Scrimba截屏视频使这成为可能。

Throughout the course, we’ll be working with a very simple portfolio website, as it gives us the ability to highlight the most important use cases for CSS Variables.

在整个课程中，我们将使用一个非常简单的产品组合网站，因为它使我们能够突出显示CSS变量最重要的用例。

Now let’s have a look at each of the lessons.

现在，让我们看一下每个课程。

第1课：为什么学习CSS变量 (Lesson 1: Why learn CSS Variables)

In the very first screencast, I’ll talk about why you should learn CSS Variables. I’ll discuss the general benefits as well as its advantages over SASS and LESS variables.

在第一个截屏视频中，我将讨论为什么您应该学习CSS变量。 我将讨论一般的优势及其相对于SASS和LESS变量的优势。

第2课：您的第一个CSS变量 (Lesson 2: Your first CSS Variable)

Then we’ll jump directly into the code. I’ll first show you how you create a CSS Variable, and then ask you to do the same. It’s important that you actually code, and not just watch the screencasts, as it makes the knowledge stick better.

然后，我们将直接跳入代码。 我将首先向您展示如何创建CSS变量，然后要求您执行相同操作。 重要的是您必须实际编写代码，而不仅仅是观看屏幕录像，因为这会使知识更好地坚持下去。

:root {--red: #ff6f69;}

：root {--red：＃ff6f69;}

body {color: var(--red);}

正文{颜色：var(-red);}

第3课：覆盖变量 (Lesson 3: Overriding variables)

We’ll continue with overriding, a cool concept that’s possible since CSS Variables have access to the DOM and are inherited down the hierarchy. This separates them clearly from SASS and LESS variables, who work more like constants than variables when they hit the browser, and have no knowledge of the DOM.

我们将继续进行覆盖，这是一个很酷的概念，因为CSS变量可以访问DOM并沿层次结构继承，因此可以实现。 这清楚地将它们与SASS和LESS变量分开，它们在访问浏览器时更像是常量而不是变量 ，并且它们不了解DOM。

第4课：局部变量 (Lesson 4: Local variables)

Local variables are variables that only are available in a certain scope, for example inside the header or sidebar section of your app. If you try to access it from another scope, it won’t be defined.

局部变量是仅在特定范围内可用的变量，例如在应用程序的标题或侧栏部分内。 如果您尝试从另一个范围访问它，则不会定义它。

第5课：使用CSS变量进行主题化 (Lesson 5: Theming with CSS Variables)

Themes is one of the biggest benefits about CSS Variables. By themes, I’m not only talking about full website themes, but also component specific themes, which are a more normal use case (e.g. visually changing an item to featured so that it stands out from the crowd).

主题是CSS变量的最大优点之一。 就主题而言，我不仅在谈论完整的网站主题，还在谈论特定于组件的主题，这是一个更正常的用例(例如，从视觉上将项目更改为具有特色的项目， 以使其在人群中脱颖而出)。

Here we’re using themes to make one of our items in the grid stand out from the others.

在这里，我们使用主题使网格中的一项与众不同。

第6课：使用JavaScript更改变量 (Lesson 6: Changing variables with JavaScript)

You can also change CSS Variables with JavaScript, which is very useful. This opens up the possibility to allow your users to change your variables. Again something which aren’t possible with LESS and SASS variables. A very relevant example of this is allowing users to adjust the overall font size on your site. This will make it more accessible for people with bad vision.

您还可以使用JavaScript更改CSS变量，这非常有用。 这为您的用户提供了更改变量的可能性。 再次，使用LESS和SASS变量是不可能的。 一个非常相关的示例是允许用户调整您网站上的整体字体大小。 这将使视力不好的人更容易使用它。

第7课：CSS变量的响应能力 (Lesson 7: Responsiveness with CSS Variables)

Given that CSS Variables have access to the DOM, they can also be changed based upon to screen size. This is actually just an example on overriding, but I think it deserves a whole new screencast, as responsiveness is pretty core these days. Everything that makes responsiveness easier ought to be used by front-end developers.

鉴于CSS变量可以访问DOM，因此还可以根据屏幕大小对其进行更改。 这实际上只是覆盖的一个示例，但是我认为它值得进行全新的截屏，因为如今响应能力已成为核心。 前端开发人员应该使用所有使响应变得更容易的方法。

第8课：CSS变量和继承 (Lesson 8: CSS Variables and inheritance)

Even though I talk about inheritance throughout the course, we’ll end the course with a few extra notes on it, as there are a couple of use cases which you might imagine works, but which don’t.

即使我在整个课程中都讨论继承，我们也会在课程结束时添加一些额外的注释，因为您可能会想到有一些用例，但没有。

And that’s it. Going through these quick screencasts, you’ll have a solid understanding of CSS Variables. Watching them will take you less than 30 minutes, and you can also adjust the replay speed to make it even faster.

就是这样。 通过这些快速截屏视频，您将对CSS变量有深入的了解。 观看它们将花费您不到30分钟的时间，您还可以调整重播速度以使其更快。

In other words: this course is probably the fastest way to learn CSS Variables properly.

换句话说：本课程可能是正确学习CSS变量的最快方法。

The challenges might, of course, make it take a little bit more time, but they are voluntary. You choose how interactive you want this course to be.

当然，挑战可能会花费更多时间，但它们是自愿的。 您选择本课程要如何互动。

Scrimba格式 (The Scrimba format)

The course is built using Scrimba, an interactive coding screencast tool of which I’m a co-founder, together with Magnus and Sindre.

该课程是使用Scrimba和Magnus和Sindre共同开发的，Scrimba是一种交互式编码截屏工具，我是我的共同创始人。

As I’ve mentioned before, the unique thing with Scrimba is that the screencasts are fully interactive, meaning you can edit the code inside the casts.

如前所述，Scrimba的独特之处在于截屏视频是完全交互式的，这意味着您可以在演员表中编辑代码。

Here’s a gif which explains the concept:

这是解释概念的gif：

Pause the screencast → Edit the code → Run it! → See your changes

暂停截屏→编辑代码→运行它！ →查看您的更改

This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.

当您觉得需要试验代码以正确理解它时，或者只想复制一段代码时，这非常有用。

Also, Scrimba screencasts weigh 1% of videos in file size, meaning that it’s much easier to watch even when your internet connection is slow.

另外，Scrimba截屏视频占文件视频的1％，这意味着即使您的互联网连接速度较慢，也更容易观看。

So check out the course today, and happy coding :)

因此，请立即查看本课程 ，并祝您编程愉快：)

---

---

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/want-to-learn-css-variables-heres-my-free-8-part-course-f2ff452e5140/

非交互式登录 环境变量