上一篇我們實作了 _variable.sass 的內容，那 main.sass 內還要放什麼呢？基本上，main.sass 就會是當作我們所有 sass 的引入入口，就像是 vue、react 使用的 App.js 一樣，作為其他 js 的引入入口。

_basic.sass

為了使網頁中的字型以及顏色先達到統一的一致性，我們先新建一個 basic.sass 來定義 body 以及其他需要統一修改樣式的內容，之後在 main.js 引入生效。

// _basic.sass

body
    font-family: $sans-font
    text-transform: uppercase
// 所有自行套用上 noto sans tc，並且是轉換為大寫的狀態

a
    color: $primary-color
    text-decoration: none
    hover: hover

a:hover
    color: $secondary-color
// 因為 VOGUE 的 link 都是 hover 紅色的，所以我們這邊也先統一設置一下

.container
    color: $primary-color
    background-color: $primary-background-color
// 設置 container class 來準備裝上內容，並且預設字體顏色及背景色

基本上的配置大概先做到這樣，我們之後再配合 html 的結果來調整。

關於順序

比較需要注意的是，main.sass 中的引入順序會影響參數的讀取，所以要注意！一開始的變數文件 _variable.sass 要放在最上方，之後才是引入 basic.sass 喔！

// main.sass

@import "variable"
@import "basic"

現在我們擁有了：

1. main.sass - import 所有的 sass 文件，是統一的入口。
2. _variable.sass - 負責各種變數配置的 sass，若要修改可從此處下手。
3. _basic.sass - 先整理基本的配置，把文字、顏色等配置先分發給大家，再看情況各自調整。

來組合我們的 sass，有沒有覺得架構越來越明顯？沒有也沒關係，相信你之後應該會慢慢感受到的，期望大家都能一起開竅（？

今天就先這樣啦～掰啦～

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？