iT邦幫忙

2021 iThome 鐵人賽

DAY 10
1
Modern Web

SASS 基礎初學三十天系列 第 10

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

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


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

lu23770127 - SASS 基礎初學三十天

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

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

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

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


上一篇
DAY 09 Extends, Inhreitance
下一篇
DAY 11 Operators
系列文
SASS 基礎初學三十天30

尚未有邦友留言

立即登入留言