【译】如何利用CSS网格布局和CSS自定义变量快速构建app原型

CSS 网格布局和 CSS 自定义变量为前端开发人员带来了很大的好处。前者使我们创建网站布局非常简单，而后者则是我们可以在 CSS 样式表使用变量。

在本教程中，我将向你展示如何将它们结合使用以快速构建应用程序设计原型。

我们使用的示例直接取自我的免费课程，内容是关于如何使用 React.js 和Chatkit API 构建聊天应用程序

如果你不想阅读文章，想看录屏视频， 看看我这门课的第15和16节 ，在里面，你可以获取代码，以便自己进行试验。在学习本教程时，请尽情去自己试验。

设置网格容器

我们的 app 使用 CSS 网格布局， css gird 是个很强大的模块，，使用它可以很容易构造布局，并随意移动，如果使用 grid-template-areas 这个属性，将尤其实用，接下来我会展示给你看

首先我们来看看我们的聊天应用程序看起来是什么样子：

如果我们在 Chrome 中打开开发工具，我们将能够观察到底层网格的构建方式。 如您所见，它有六行六列：

创建这样一个网格布局的代码如下：

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

首先，我们将容器设置为网格，然后我们想要6列，每一列应该都是一个分数（ 1fr ）单位宽，一个分数单位表示可用空间的一部分。这里我们把宽度等分成六个同样宽的份数，给每一列一份。

至于行，我们没有将他们等分成和高度相等的份数，，因为最后一行没有其他行那么高。我们明确地将它设为 60px 高而不是 1fr 高。

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 60px;
复制代码

现在我们设置了网格的结构，我们可以进入下一个部分:定位

网格元素定位

网格容器的每个直接子元素都是一个网格项。我们有四个网格项，每项都被包裹在下图中的矩形中

为了让每一项都显示在上图中的相应位置，我们需要使用 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";
}
复制代码

每个字符串表示一行，每个字符表示网格中的一个单元格。字符与网格项(房间列表、消息列表、创建新房间和发送消息)具有语义关系。

现在为了根据 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;  
}
复制代码

这些类名当然也应用于HTML中的网格项。但是，我不会详细介绍这一点，因为我假设您知道如何向 HTML 标签中添加类。

有了这些，我们就可以开始试验布局了。只需在 grid-template-areas 值中交换几个字符，我们就可以完全翻转布局。

在上面的动图中，我通过更改 room list item 和 the new room form item 的位置来尝试四种不同的布局。 我唯一要改变的是 grid-template-areas 属性。

下面有四种不用的结构。 尝试看看是否你可以在脑海中想象每个相应的布局：

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";
    
复制代码

如果你学习了我的课程，你会有自己的代码，可以尝试更改你喜欢的布局

使用 CSS 变量改变颜色

现在我们要使用 CSS 变量来改变应用程序的颜色。如果您以前没有接触过 CSS 变量，请快速查看下面的图片，因为它们总结了 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;  
}
复制代码

这些变量在整个样式表中重用了17次。但是，我们不需要遍历所有这些地方，让我们看看 ——main-color 是如何在消息框和左侧侧边栏中用作背景颜色的。

代码中我们可以这样使用：

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

.message-text {  
  background: var(--main-color);  
}
复制代码

变量的美妙之处在于我们更改变量声明。会影响到整个app效果

:root {  
  --main-color: red;  
}
复制代码

现在看起来是这样：

我们只需要简单地在 :root 更改变量声明的值，就会改变整个 app 的样式

参考如下调色板，选择喜欢的颜色应用到 app

声明变量：

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

结果：

网格布局的变量相结合

如果我们将此与使用 CSS 网格更改布局相结合，就会得到两个互不相似的独特聊天应用程序。我们来做一下

和最后的示例相比较，这是我们刚开始布局看起来的样子：

: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"; 
}
复制代码

相当酷。

现在我建议你学习我的完整课程。我将引导你使用 react.js 和 Chatkit API 创建这个应用程序。当然，我会共享完整的代码，你可以自己设计。