當@mixin不帶參數的時候是不是二者都一樣啊
1 回答

吃雞游戲
TA貢獻1829條經驗 獲得超7個贊
對的,不帶參數的 mixin 等價于 placeholder(效果上等價,但性能上 placeholder 略優)。出現這個困惑是正常的,之所以會出現兩者的功用略有重疊是有歷史原因的。
總之呢,作為復用的組件,需要傳遞參數的就定義為 @mixin,不需要的就定義為 placeholder,這算是 Sass 的最佳實踐原則之一。盡量不要去 extend class,因為會有冗余,除非那個 class 本來就有用到,不算冗余。
在一般的開發過程當中,placeholder 的使用都會有明顯的跡象。比如說重置標準的列表元素(用作容器而不是文本列表)可以這樣:
%reset-list { margin: 0px; padding: 0px; list-style: none; }
但是我們很少會把這樣的 placeholder 直接用于產品代碼,因為從組件化的角度來說它還不夠“內聚”,它只是解決了一個組件的一塊拼圖罷了。多數時候我們還需要進一步的去構造組件:
@mixin menu($display: inline-block) { @extend %reset-list; // 不管什么樣的 menu,先重置它的盒模型 display: #{$display}; // 根據傳參決定橫向/縱向 // 其他……}
如此一來,真正在產品代碼里使用的就以 mixin 為主了。因為基本上所有的模塊你總能找出可變因素的,而那些確實不可變又沒有合適的 mixin 用來內聚的 placeholder 才會被用在產品代碼中。
- 1 回答
- 0 關注
- 852 瀏覽
添加回答
舉報
0/150
提交
取消