---
# System prepended metadata

title: 【Day9】系統性管理開發 part2

---


## sass動態產生模組mixin概念
mixin即為動態產生模組化的CSS
- 當遇到共同屬性時
  1. 呈現三個不同尺寸的正方形方格
  - 過去經驗
    - HTML(pug)
    ```htmlmixed=
    .block.block1 
    .block.block2 
    .block.block3 
    ```
    - CSS(sass)
    ```css=
    .block
      width: 50px
      height: 50px
      border: solid 1px
      
    .block1
      width: 70px
      height: 70px
    .block2
      width: 90px
      height: 90px
    .block3
      width: 110px
      height: 110px
    ```
  - 結合mixin與變數概念
    - HTML(pug)
    ```htmlmixed=
    .block1 1
    .block2 2
    .block3 3
    ```
    - CSS(sass)
    1. 把共同屬性名稱放在@mixin 後方
    2. 在名稱後方的小括號中放入變數及預設參數
    3. 往後利用「+」來應用此共同屬性並按照不同需求調整參數
    ```css=
    @mixin block($length: 50px)
      width: $length
      height: $length
      border: solid 1px
      
    .block1
      +block(70px)
    .block2
      +block(90px)
    .block3
      +block(110px)
    ```
    - 呈現
    ![](https://hackmd.io/_uploads/Hyn8Sqjih.png)
  2. 更有效率調整字體屬性
  - 大小、顏色、間距
    - HTML(pug)
    ```htmlmixed=
    h3 標題文字
    h4 副標
    ```
    - CSS(sass)
    ```css=
    @mixin text($font-size: 30px, $color: red, $letter-spacing: 20px)
      font-size: $font-size
      color: $color
      letter-spacing: $letter-spacing
      
    h3
      +text(20px, brown, 5px)
    h4
      +text(15px, #333, 2px)
    ```
    - 呈現
    ![](https://hackmd.io/_uploads/r1AG55ii2.png)

  - 框線尺寸
    - HTML(pug)
    ``` htmlmixed=
    .button1 按鈕一
    .button2 按鈕二
    ```
    - CSS(sass)
    ```css=
    @mixin size($w, $h)
      width: $w
      height: $h
      
    .button1
      border: solid 1px black
      +size(200px, 100px)
    .button2
      border: solid 1px black
      +size(100px, 50px)
    ```
    - 呈現
    ![](https://hackmd.io/_uploads/H1GYi5oo2.png)
## 常用mixin
```css=
@mixin indep
  position: absolute
  
@mixin center
  position: absolute
  left: 50%
  top: 50%
//利用translate根據下層元素寬高校正位置(偏移)
  transform: translateX(-50%) translateY(-50%)
  
@mixin trans($s)
  transition: $s
  
@mixin size($w, $h)
  width: $w
  height: $h
 
@mixin fill
  width: 100%
  height: 100%
  
@mixin text($size, $spacing, $color)
  font-size: $size
  letter-spacing: $spacing
  color: $color
```
## HTML參考資料轉換Jade
上網搜尋「[html to jade](https://html2jade.org/)」
## CSS參考資料轉換sass
上網搜尋「[css to sass](https://css2sass.herokuapp.com/)」
注意：從css轉sass不會用變數的概念來管理

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::