### Sass代码重用 （1）继承“@extend”； ```javascript .spriteAll{ bakckground:url(images/sprite.png) no-repeat; } .sprite-1{ @extend .spriteAll; background-position:0 -30px;} 编译出来 .spriteAll, .sprite-1{ bakckground: url(images/sprite.png) no-repeat;} .sprite-1{ background-position: 0 -30px; } ``` （2）占位符“%placeholder”； - 需要保留基类的：只使用@extend来实现； - 不需要保留基类的：使用@extend配合%placeholder来实现； ```javascript %btn{ border:1px solid silver; } .btn-primary{ @extend %btn; background-color:red;} 编译 .btn-primary{ border: 1px solid silver;} .btn-primary { background-color: red;} ``` （3）混合宏“@mixin”； 用“混合宏（mixin）”来处理经常被多个地方使用的**相同的CSS代码块** **用“@mixin”来定义一个混合宏，然后使用“@include”来调用一个混合宏** ```javascript @mixin 混合宏名{ 样式属性1:取值1; …… } //定义一个混合宏 选择器{ @include 混合宏名; } //调用一个混合宏 @mixin center($width){ width: $width; margin-left: -($width) / 2; } div{ @include center(100px);} 编译出来 div { width: 100px; margin-left: -50px;} --------------------------------- @mixin radius($radius:3px) // 参数带默认值 @include radius; @include radius(5px); ``` （1）继承和混合宏都能实现相同代码块的重用，极大提高开发效率； （2）继承的使用一般不存在代码冗余，而混合宏的使用会存在代码冗余； （3）继承不可以传递参数，而**混合宏可以传递参数**；