Day 4 SASS/SCSS 進階技巧

scss

32499522 2025-09-19 20:51:40 ‧ 70 瀏覽

分享至

昨天學了SASS的基本功能（變數、巢狀），今天來看看三個實用的技巧：

1.Mixin–可重複使用的樣式組合

2.繼承(Extend)–共用現有樣式

3.運算(Operators)–讓樣式可以計算

接下來我們用線上的工具sassmeister做練習
1.Mixin

轉譯成CSS

這樣寫的好處是不用重複寫一大堆按鈕樣式，只要套用Mixin即可。
2.繼承(Extend)

轉譯成CSS

這樣寫的好處是共用大部分樣式，僅針對差異部分修改。
3.運算(Operators)

轉譯成CSS

這樣寫的好處是不用死記大小，直接用數學計算就能生成一致的字型比例。