亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

今天學習SASS,@mixin和%傻傻分不清楚,求指導

今天學習SASS,@mixin和%傻傻分不清楚,求指導

慕勒3428872 2018-08-20 11:12:45
當@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 才會被用在產品代碼中。


查看完整回答
反對 回復 2018-08-25
  • 1 回答
  • 0 關注
  • 852 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號