css編譯工具Sass中混合宏，繼承，預留位置分別在什麼時候使用，編譯工具sass

css編譯工具Sass中混合宏，繼承，預留位置分別在什麼時候使用，編譯工具sass

//SCSS中混合宏使用@mixin mt($var){  margin-top: $var;  }.block {  @include mt(5px);  span {    display:block;    @include mt(5px);  }}.header {  color: orange;  @include mt(5px);  span{    display:block;    @include mt(5px);  }}

1、上面是sass混合宏方法編寫的sass代碼，下面是編譯出來的css代碼

.block {  margin-top: 5px;}.block span {  display: block;  margin-top: 5px;}.header {  color: orange;  margin-top: 5px;}.header span {  display: block;  margin-top: 5px;}

上面代碼中可以看出，sass混合宏編寫不會自動合并相同的樣式代碼，如果在樣式檔案中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗餘，這也是無法忍受的一件事情。不過他並不是一無事處，他可以傳參數；比如

@mixin br($rad){    border-radius:$rad;    -webkit-border-radius:$rad;    -moz-border-radius:$rad;    -ms-border-radius:$rad;}.md{    @include br(20px);}

2、下面是Sass中的繼承

//SCSS 繼承的運用.mt{  margin-top: 5px;  }.block {  @extend .mt;  span {    display:block;    @extend .mt;  }}.header {  color: orange;  @extend .mt;  span{    display:block;    @extend .mt;  }}

下面是編譯出來的css代碼

.mt, .block, .block span, .header, .header span {  margin-top: 5px;}.block span {  display: block;}.header {  color: orange;}.header span {  display: block;}

使用繼承後，編譯出來的 CSS 會將使用繼承的代碼塊合并到一起，通過組合選取器的方式向大家展現，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來的代碼相對於混合宏來說要乾淨的多，也是我們期望看到。但是他不能傳變數參數。所以如果你的代碼塊不需要專任何變數參數，而且有一個基類已在檔案中存在，那麼建議使用 Sass 的繼承。

3、預留位置

%mt{  margin-top: 5px;  }.block {  @extend %mt;  span {    display:block;    @extend %mt;  }}.header {  color: orange;  @extend %mt;  span{    display:block;    @extend %mt;  }}

預留位置編譯出來的 CSS 代碼和使用繼承基本上是相同，只是不會在代碼中產生預留位置 mt 的選取器。那麼預留位置和繼承的主要區別的，“預留位置是獨立定義，不調用的時候是不會在 CSS 中產生任何代碼；繼承是首先有一個基類存在，不管調用與不調用，基類的樣式都將會出現在編譯出來的 CSS 代碼中。”