【譯】如何利用CSS網格佈局和CSS自定義變量快速構建app原型

原文：www.freecodecamp.org/news/how-to…
做者：Per Harald Borgen
翻譯：前端小白

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 建立這個應用程序。固然，我會共享完整的代碼，你能夠本身設計。