第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

今天學(xué)習(xí)SASS,@mixin和%傻傻分不清楚,求指導(dǎo)

今天學(xué)習(xí)SASS,@mixin和%傻傻分不清楚,求指導(dǎo)

慕勒3428872 2018-08-20 11:12:45
當(dāng)@mixin不帶參數(shù)的時(shí)候是不是二者都一樣啊
查看完整描述

1 回答

?
吃雞游戲

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

對(duì)的,不帶參數(shù)的 mixin 等價(jià)于 placeholder(效果上等價(jià),但性能上 placeholder 略優(yōu))。出現(xiàn)這個(gè)困惑是正常的,之所以會(huì)出現(xiàn)兩者的功用略有重疊是有歷史原因的。

總之呢,作為復(fù)用的組件,需要傳遞參數(shù)的就定義為 @mixin,不需要的就定義為 placeholder,這算是 Sass 的最佳實(shí)踐原則之一。盡量不要去 extend class,因?yàn)闀?huì)有冗余,除非那個(gè) class 本來(lái)就有用到,不算冗余。

在一般的開(kāi)發(fā)過(guò)程當(dāng)中,placeholder 的使用都會(huì)有明顯的跡象。比如說(shuō)重置標(biāo)準(zhǔn)的列表元素(用作容器而不是文本列表)可以這樣:

%reset-list {
    margin: 0px;    
    padding: 0px;    
    list-style: none;
}

但是我們很少會(huì)把這樣的 placeholder 直接用于產(chǎn)品代碼,因?yàn)閺慕M件化的角度來(lái)說(shuō)它還不夠“內(nèi)聚”,它只是解決了一個(gè)組件的一塊拼圖罷了。多數(shù)時(shí)候我們還需要進(jìn)一步的去構(gòu)造組件:

@mixin menu($display: inline-block) {
    @extend %reset-list;    // 不管什么樣的 menu,先重置它的盒模型

    display: #{$display}; // 根據(jù)傳參決定橫向/縱向

    // 其他……}

如此一來(lái),真正在產(chǎn)品代碼里使用的就以 mixin 為主了。因?yàn)榛旧纤械哪K你總能找出可變因素的,而那些確實(shí)不可變又沒(méi)有合適的 mixin 用來(lái)內(nèi)聚的 placeholder 才會(huì)被用在產(chǎn)品代碼中。


查看完整回答
反對(duì) 回復(fù) 2018-08-25
  • 1 回答
  • 0 關(guān)注
  • 861 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)