## 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 :::