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