運用兩種做法，去衍生不同樣式的 css !

Partial

Partial 是把 css 拆分的其中一個方法，他不會被正式引入到 css 中，透過 module 的 use 引入後，只取得定義的內容而已。

Module

主要的 sass 檔，通常會做模組化的設計的主體，像是 Button, Alert, Input 等常用的物件，會做成 Module，在引入不同的 partial 來變化 style。

實作

這次實作來試試看用 partial 和 module 的方式，組成一個有藍天白雲綠地的畫面吧！

// _partial.sass
$green: #458344
$cloud: #fff
$sun: #f0e006
$sky-blue: #00a2ff

header
    div
        background-color: $sky-blue
        color: $cloud

        label
            color: $sun
            margin: 50px

首先新增一個 partial 的檔案，在裡面定義了藍天白雲綠地的顏色，因為偷懶在 header 下的 div 中放入定義好的顏色，因為 div 是整張包裹起來的底，所以給他藍色的背景

然後再拉一個 label 把顏色定義為黃色，來代表太陽，加點 margin 讓他看起來神聖有距離(?

// module.sass
@import './_partial'
$ground: $green
$mud: #3f2601

p
    background-color: $ground
    color: $mud
    margin: 150px 0px 0px 0px
    padding: 20px

再來定義一個 module 本體，並且把剛剛的 partial 用 @import 引入，基本上只需要檔案的名稱，聰明的 sass 就知道你指的是誰了，再來把 ground 的顏色用 partial 中定好的綠色設定，因為又偷懶把 p 的底色跟字體顏色設定好後，就有一個美麗的大地了！

這邊可以看到，如果有安裝前面介紹的套件，就連在 partial 中的顏色也會顯示喔！

import "./App.css";
import "./assets/sass/module.sass";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div>
          cloud cloud cloud <label>sun</label> cloud
          <br /> cloud cloud cloud
          <p>mud mud mud</p>
        </div>
      </header>
    </div>
  );
}

export default App;

在 App.js 中把物件擺放好，依照自己的喜好亂擺吧～

你就獲得了一幅美麗的世紀名畫

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

lu23770127 - SASS 基礎初學三十天

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

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

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

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