基礎(chǔ)

話雖如此，混合宏確實(shí)非常有用，你應(yīng)該學(xué)習(xí)使用它。經(jīng)驗(yàn)告訴我們，如果你發(fā)現(xiàn)有一組 CSS 屬性經(jīng)常因同一個(gè)原因一起出現(xiàn)（非巧合），那么你就可以使用混合宏來(lái)代替。比如Nicolas Gallagher的清除浮動(dòng)應(yīng)當(dāng)放入一個(gè)混合宏的實(shí)例。

/// Helper to clear inner floats
/// @author Nicolas Gallagher
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

另一個(gè)有效的實(shí)例是通過(guò)在混合宏中綁定?width?和?height?屬性，可以為元素設(shè)置寬高。這樣不僅會(huì)淡化不同類型代碼間的差異，也便于閱讀。

/// Helper to size an element
/// @author Hugo Giraudel
/// @param {Length} $width
/// @param {Length} $height
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

擴(kuò)展閱讀

• Sass Mixins to Kickstart your Project
• A Sass Mixin for CSS Triangles
• Building a Linear-Gradient Mixin