DAY 16 Main 的内容

上一篇我们实作了 _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 - 前端？後端？你早晚都要全端的，何不从现在开始？