Css compilation tool Sass hybrid macro, inheritance, placeholder when to use, compilation tool sass

Css compilation tool Sass hybrid macro, inheritance, placeholder when to use, compilation tool sass

// Use the @ 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. The above is the sass Code Compiled by the sass hybrid macro method. The following is the compiled css code.

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

As shown in the code above, sass hybrid macros do not automatically merge the same style code. If you call the same hybrid macro in the style file, multiple corresponding style codes will be generated,Code RedundancyThis is also intolerable. However, he does not have nothing to do. He can pass parameters. For example:

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

2. the inheritance in Sass is as follows:

// Use of SCSS inheritance. mt {margin-top: 5px ;}. block {@ extend. mt; span {display: block; @ extend. mt ;}}. header {color: orange; @ extend. mt; span {display: block; @ extend. mt ;}}

The following is the compiled css code.

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

After inheritance is used, the compiled CSS will combine the inherited code blocks and present them to you through the combination selector, for example. mt ,. block ,. block span ,. header ,. header span. In this way, the compiled code is much cleaner than the Mixed Macro, which we expect. HoweverVariable parameters cannot be passed. Therefore, if your code block does not require any variable parameters and a base class already exists in the file, we recommend that you use Sass inheritance.

3. placeholders

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

The CSS Code Compiled by placeholders is basically the same as the inheritance code, but does not generate the placeholder mt selector in the code. The main difference between placeholders and inheritance is that "Placeholders are defined independently and will not generate any code in CSS when they are not called. Inheritance first has a base class, no matter whether it is called or not, the style of the base class will appear in the compiled CSS code."