我所探討的焦點(diǎn)在 map 這種數(shù)據(jù)類型上，特別是使用 @content，@at-root 和 unique-id() 等指令合并 maps 所實(shí)現(xiàn)的奇妙方法。其中之一就是混合宏的設(shè)計(jì)模式，這一設(shè)計(jì)模式通過使用 @extend 指令和占位符選擇器來解決 Sass 的一些實(shí)際問題：

由于常在代碼開始部分引入占位符擴(kuò)展，所以就應(yīng)該將其置于代碼頂部而不受其他因素所影響；
優(yōu)先使用 @include 還是 @extend？這里給出的答案是 @include。
自意識(shí)混合宏的核心是通過創(chuàng)建或擴(kuò)展占位符選擇器，動(dòng)態(tài)地生成相關(guān)樣式。當(dāng)它第一次被傳參調(diào)用后，就會(huì)有一個(gè) map 變量記錄下相關(guān)的參數(shù)。隨后，當(dāng)再次使用相同的參數(shù)調(diào)用時(shí)，就會(huì)執(zhí)行擴(kuò)展同一占位符的操作，而不是生成重復(fù)代碼。

在下面的代碼中，有一些混合宏的參數(shù)是相同的，有一些參數(shù)是獨(dú)有或特定的。那么在最終生成的 CSS 中，就會(huì)發(fā)現(xiàn)，具有相同參數(shù)的部分會(huì)使用擴(kuò)展的方式，即合并選擇器的方式；具有獨(dú)特或特定參數(shù)的部分，則仍然會(huì)生成獨(dú)立的選擇器樣式。

SCSS 源代碼和測(cè)試數(shù)據(jù)：

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表