DAY 10 Partials, Modules

运用两种做法，去衍生不同样式的 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 的底色跟字体颜色设定好後，就有一个美丽的大地了！

Untitled

这边可以看到，如果有安装前面介绍的套件，就连在 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 中把物件摆放好，依照自己的喜好乱摆吧～

Untitled