_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 - 前端？後端？你早晚都要全端的，何不从现在开始？