_variable.sass

把所有的主要變數設置，都放到 _varialbe.sass 來統一管理，並且建立一個 main.sass，來負責引入其他 partial 的內容，組合成完整的 css 檔案。

實作

首先在 _variable.sass 中放入字型的變數，這邊選用了前面在查看 VOGUE 版型時，在 Google Fonts 中所挑選的文字樣式，如果忘記的人可以回去看看～

引入的方式在 Google Fonts 選定字型後，右邊的 sidebar 功能欄位就會幫你寫好 import 的方式，只要複製 link 以及 font-family 即可，如下面的方式貼上，並且幫定義好的 font 取好記的變數名稱。

// _variable.sass

@font-face
    font-family: 'Noto Sans TC', sans-serif
    font-family: 'Noto Serif TC', serif
    font-family: 'Prata', serif
    src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&family=Noto+Serif+TC:wght@500&family=Prata&display=swap')

$logo-font: 'Prata', serif
$sans-font: 'Noto Sans TC', sans-serif
$serif-font: 'Noto Serif TC', serif

接著我們設置顏色的部分，VOGUE 的三個顏色，黑白紅，以及廣告版位的灰，並且幫他們取變數名稱。

// _variable.sass

$primary-color: #000
$secondary-color: #EE0000
$primary-background-color: #fff
$gray: #f2f2f2

以上就配置好了基礎的文字、顏色變數了！

之後引入在 main.sass 中即可。

// main.sass

@import "variables";

完成以上步驟後，你就獲得了一個最基礎的定義變數 sass 檔，那我們明天見～

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

lu23770127 - SASS 基礎初學三十天

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

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

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

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