iT邦幫忙

2021 iThome 鐵人賽

DAY 7
1
Modern Web

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

DAY 07 Mixins

混入 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 來檢視主題色的效果。

Untitled

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


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

lu23770127 - SASS 基礎初學三十天

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

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

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

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


上一篇
DAY 06 Variable
下一篇
DAY 08 Nesting
系列文
SASS 基礎初學三十天30

2 則留言

0
juck30808
iT邦新手 4 級 ‧ 2021-09-22 23:57:33

推推!

Tilda iT邦新手 5 級 ‧ 2021-09-23 16:52:15 檢舉

好推推!

0
juck30808
iT邦新手 4 級 ‧ 2021-09-22 23:58:36

推推!

Tilda iT邦新手 5 級 ‧ 2021-09-23 16:52:19 檢舉

好推推!

我要留言

立即登入留言