混入 Mixins

當我們在編寫 css 時，常常會發現有要重複套用的地方，像是一個網站的主題樣式，假如說主色調是藍色，那當我們在設計字型、底色時，會用到這個藍色的次數就會增加，如何避免一直在重複寫同樣的顏色呢？除了使用參數的方法，也可以利用 mixin 去設定，而且當有不同的設計變數時，也可以快速地去更換 style 的佈景樣式。

@mixin

mixin 相當於統一設定的區塊，他就像一個 function 一樣，你可以命名它，並且在後面的（）中去放參數，之後下方設定關於這個 mixin 的統一內容，例如 font、margin、background color ⋯⋯等。

@include

實際使用 mixin 的區塊，他的概念類似把 mixin 設定好的內容拉進來自己的區塊，讓原本重複的 style 方便地引入要設計的區塊，在使用上就是直接 call mixin 的 function，如果有參數就是在參數中填入即可。

實作

$primary-dark: #232323
$primary-gray: #808080
$danger-color: #d31313

@mixin DarkMode($theme:$primary-dark)
    background: $theme
    font-size: 50px
    margin: 10px

.info
    @include DarkMode()
.success
    @include DarkMode($theme: $primary-dark)
.warning
    @include DarkMode($theme: $primary-gray)
.danger
    @include DarkMode($theme: $danger-color)

首先設定一個 DarkMode 的 mixin 主題，在這個主題下我們可以選定主題顏色，來套入 theme 的參數中，並且在不同 class 中，都填入想要套用的主題色，使用 @include 把 DarkMode 帶入，可以看到，參數也可以不填寫，如果不填寫的話，就會帶入預設值，即是 $primary-dark 的顏色。

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <label class="info">this is info</label>
        <label class="success">this is success</label>
        <label class="warning">this is warning</label>
        <label class="danger">this is danger</label>
      </header>
    </div>
  );
}

export default App;

App.js 中套用不同的 class 來檢視主題色的效果。

套用成功！可以看到預設顏色有正確顯示，如果有套入參數的主題也有依據參數顏色來套用。

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

lu23770127 - SASS 基礎初學三十天

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

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

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

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