vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型

vue css 应用变量

CSS Grid and CSS Variables are both huge wins for front-end developers. The former makes it dead simple to create website layouts, while the latter brings the power of variables to your stylesheets.

CSS Grid和CSS变量对于前端开发人员都是巨大的胜利。 前者使创建网站布局变得非常简单，而后者则将变量的功能带到了样式表中。

In this tutorial, I’ll show you how to utilize them together in order to quickly prototype app designs.

在本教程中，我将向您展示如何一起使用它们以便快速为应用程序设计提供原型。

The example we’ll use has been pulled directly from my free course on how to build a chat app using React.js and the Chatkit API:

我们将使用的示例直接来自我的免费课程 ，该课程介绍如何使用React.js和Chatkit API构建聊天应用程序：

So if you prefer watching interactive screencasts over reading, check out lecture number 15 and 16 of my course here. In it, you’ll also get access to the code so that you can experiment for yourself as well. Feel free to do that as you follow this tutorial.

因此，如果您喜欢看互动式屏幕录像而不是阅读， 请在这里查看我课程的第15和16号讲课。 在其中，您还可以访问代码，以便您也可以自己进行试验。 遵循本教程，随时进行操作。

设置网格容器 (Setting up the grid container)

Our app has been laid out using CSS Grid, a module which makes it easy to construct layouts and to shuffle around on them. This is especially useful if you’re taking advantage of the grid-template-areas property, which I’ll show you how we’re using further down.

我们的应用程序已使用CSS Grid进行了布局，该模块可轻松构造布局并在其上随机播放。 如果您要利用grid-template-areas属性，这将特别有用，我将向您展示如何进一步使用它。

Let’s first have a look at what our initial chat app looks like:

首先，让我们看一下我们最初的聊天应用程序的外观：

If we open up the dev tools in Chrome, we’ll be able to inspect how the underlying grid has been constructed. As you can see, it has six rows and six columns:

如果我们在Chrome中打开开发工具，我们将能够检查基础网格的构建方式。 如您所见，它有六行六列：

The code for creating such a grid is the following:

创建这种网格的代码如下：

.app {  display:                grid;  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  
}

First, we’re setting the container to be a grid. Then we’re saying that we want six columns and that each of them should be one fraction unit (1fr) wide. One fraction unit means one part of the available space. So here we’re splitting the width into six equally wide fractions and give each column one fraction.

首先，我们将容器设置为网格。 然后，我们要说的是要有六列，每列应为一个小数单位( 1fr )宽。 一小数单位表示可用空间的一部分。 因此，在这里，我们将宽度分为六个相等的分数，并为每一列分配一个分数。

As for the rows, we’re not splitting all of them into equal height, as the last row isn’t as tall as the rest of them. We’ve explicitly told it to be 60px tall instead of 1fr tall:

至于行，我们不会将所有行均等地分割，因为最后一行不如其余行那么高。 我们已经明确告诉它应该是60px高而不是1fr高：

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;

Now that we’d laid out the structure of our grid, we can move on to the next part: positioning.

现在我们已经布局了网格的结构，接下来可以继续进行下一部分：定位。

放置网格项目 (Positioning the grid items)

Each direct child of a grid container is a grid item. We have four items, each being boxed into a rectangle in the image below:

网格容器的每个直接子代都是一个网格项 。 我们有四个项目，每个项目都装在下图中的矩形框中：

In order to get the items to be placed in the positions they have above, we’ll need to use the grid-template-areas property and construct a visual representation of the grid in our styleeheet:

为了将项目放置在它们上方的位置，我们需要使用grid-template-areas属性并在样式表中构建网格的可视表示形式：

.app {  display:                grid;  grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;  grid-template-rows:     1fr 1fr 1fr 1fr 1fr 60px;  grid-template-areas:  "r m m m m m"  "r m m m m m"  "r m m m m m"  "r m m m m m"  "r m m m m m"  "n s s s s s";
}

Each of the strings represents a row and each of the characters represents a cell in the grid. The characters have a semantical relation to the grid items they are representing (room list, message list, new room form and send message form).

每个字符串代表一行，每个字符代表网格中的一个单元格。 字符与它们所代表的网格项目( 房间列表 ， 消息列表 ， 新房间形式和发送消息形式 )具有语义关系。

Now in order to position our items according to our grid-template-areas we’ll need to use the characters as their grid-area value. Like this:

现在，为了根据grid-template-areas定位项目，我们需要使用字符作为其grid-area值。 像这样：

.new-room-form {  grid-area: n;  
}.rooms-list {  grid-area: r;  
}.message-list {  grid-area: m;  
}.send-message-form {  grid-area: s;  
}

These classes have of course also been applied to our grid items in our HTML. However, I won’t go into detail about that, as I’m assuming that you know how to add classes to HTML tags.

这些类当然也已应用于HTML中的网格项。 但是，由于我假设您知道如何向HTML标签添加类，因此我不会对此进行详细介绍。

With this in place, we’re ready to start experimenting with the layout. By just swapping a few characters in the grid-template-areas value, we’re able to completely flip around on the layout.

有了这个之后，我们就可以开始尝试布局了。 通过在grid-template-areas值中交换一些字符，我们就可以在布局上完全翻转。

In the gif above, I’m trying four different layouts through changing the positions of the room list item and the new room form item. The only thing I’m changing is the grid-template-areas property.

在上面的gif中，我正在尝试通过更改房间列表项和新房间表单项的位置来尝试四种不同的布局。 我唯一要更改的是grid-template-areas属性。

Below are the four variations. Try and see if you can map each of them to its corresponding layout:

以下是四个变体。 尝试看看是否可以将它们每个映射到其相应的布局：

grid-template-areas:  "n m m m m m"  "r m m m m m"  "r m m m m m"  "r m m m m m"  "r m m m m m"  "r s s s s s";grid-template-areas:  "r m m m m m"  "r m m m m m"  "r m m m m m"  "r m m m m m"  "r m m m m m"  "n s s s s s";grid-template-areas:  "m m m m m r"  "m m m m m r"  "m m m m m r"  "m m m m m r"  "m m m m m r"  "s s s s s n";grid-template-areas:  "m m m m m n"  "m m m m m r"  "m m m m m r"  "m m m m m r"  "m m m m m r"  "s s s s s r";

If you take my React.js chat app course, you’ll get your very own copy of the code, so that you can change the layout exactly how you prefer to have it.

如果参加我的React.js聊天应用程序课程 ，您将获得自己的代码副本，以便您可以完全按照自己喜欢的方式更改布局。

使用CSS变量更改颜色 (Changing the colours with CSS Variables)

Now we’re going to change the colours of the app using CSS Variables. If you haven’t been exposed to CSS Variables before, have a quick look at the images below, as they sum up the core of it:

现在，我们将使用CSS变量来更改应用程序的颜色。 如果您以前没有接触过CSS变量，请快速浏览以下图像，因为它们总结了其核心：

As you can see from the image above, this makes your code easier to read, as the variable name is more semantical than the hexadecimal value. Secondly, it also gives you more flexibility in case you want to change the colour.

从上图可以看到，这使代码更易于阅读，因为变量名比十六进制值更具语义。 其次，如果您要更改颜色，它还为您提供了更大的灵活性。

Let’s see how we’ve styled our app using CSS Variables, starting with our variable declarations:

让我们看看如何从CSS变量开始，使用CSS变量为应用程序设置样式：

:root {  --main-color:            #5ea3d0;  --secondary-color:       white;  --main-text-color:       #3e5869;  --secondary-text-color:  #b0c7d6;  --new-room-form:         #d9e1e8;  --send-message-form:     #F5F5F5;  
}

These variables are reused 17 times across our entire stylesheet. But instead of going through all those places, let’s look at how the --main-color is used as a background colour in both the messages and in the left sidebar_._

这些变量在整个样式表中重复使用了17次。 但是，让我们看看在消息中和左侧边栏_._中如何将--main-color用作背景色，而不是遍历所有这些地方。

Here’s how that plays out in the code:

这是在代码中播放的方式：

.rooms-list {  background: var(--main-color);}.message-text {  background: var(--main-color);  
}

The beauty of variables is that we now can change the declaration, and then that change will affect the entire app. Let’s for example do:

变量的优点在于，我们现在可以更改声明，然后该更改将影响整个应用程序。 让我们举个例子：

:root {  --main-color: red;  
}

… which results in the following:

…结果如下：

What we now can do is simply change all the variable declarations in the :root, and thus change the entire look and feel of our app.

现在，我们只需更改:root中的所有变量声明，即可更改应用程序的整体外观。

Let’s, for example, find a nice palette online and simply use it in our app:

例如，让我们在线找到一个不错的调色板，然后在我们的应用程序中简单地使用它：

We’ll replace some of the colours in our :root with the ones from the palette above:

我们将:root某些颜色替换为上面调色板中的颜色：

:root {  --main-color: #5ea3d0;  --secondary-color: white;  --main-text-color: #3e5869;  --secondary-text-color: #b0c7d6;  --new-room-form: #d9e1e8;  --send-message-form: #F5F5F5;  
}

This results in a completely different type of chat:

这导致了完全不同的聊天类型：

结合网格和变量 (Combining Grid and Variables)

If we combine this with changing the layout using CSS Grid, we get two unique chat applications which hardly resemble each other. Let’s do that:

如果我们将其与使用CSS Grid更改布局相结合，则会获得两个彼此几乎不相似的独特聊天应用程序。 让我们这样做：

Here’s how our starting point looks like compared to our final example.

与最终示例相比，这是我们的出发点。

:root {  --main-color:           #ff66ff;  --secondary-color:      #fbd8fb; --main-text-color:      #3e5869;  --secondary-text-color: #d8b2ff;  --new-room-form:        #ffb2ff;  --send-message-form:    #d8b2ff; 
}.app {  display: grid;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;  grid-template-areas:  "m m m m r r"  "m m m m r r"  "m m m m r r"  "m m m m r r"  "m m m m n n"  "f f f f f f"; 
}

Pretty cool, huh?

太酷了吧？

Now I’d recommend you to take my entire course. In it, I’ll guide you through creating this app using React.js and the Chatkit API. I’ll, of course, share the full code with you so that you can experiment with this design for yourself.

现在，我建议您选修整个课程。 在其中，我将指导您使用React.js和Chatkit API创建此应用程序。 我当然会与您共享完整的代码，以便您可以自己尝试这种设计。

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-quickly-prototype-apps-with-css-grid-and-css-variables-8d3d96d68eaa/

vue css 应用变量