Sass hybrid macros, inheritance, placeholders

1. Hybrid macros.

As styles become more and more complex and require repeated use of large sections of styles, using variables cannot achieve our goal. At this time, the mixed macros will be used.

When using a hybrid macro, you must first declare a hybrid macro. When declaring a hybrid macro, there are two types: A Mixed Macro without parameters and a Mixed Macro with parameters.

1.1Declaration of mixed macros without ParametersUse the keyword @ Mixin. For example:

@mixin border-radius{    -webkit-border-radius: 5px;    border-radius: 5px;}

Here, @ Mixin is a keyword used to declare a hybrid macro, which is similar to @ media and @ font-face in CSS. Border-radius is the name of the hybrid macro. The braces contain reusable style codes.

For exampleCall the preceding Mixed Macro without Parameters.

button {    @include border-radius;}

　　

1.2 The Declaration of mixed macros with parameters is divided into parameters without any values and parameters with values. For example:

1.2.1Mixed Macro description of parameters with values

@mixin border-radius($radius:5px){    -webkit-border-radius: $radius;    border-radius: $radius;}　

In a buttonCall the Mixed Macro voice of the above-mentioned parameter with values.

.btn {  @include border-radius;}　

The same, but sometimes the rounded corner values of some elements on the page are different, not the above 5px, so you can randomly send values to the Mixed Macro, such:

.btn {  @include border-radius(50%);}

　　

1.2.2Mixed Macro description of parameters without values

@mixin border-radius($radius){    -webkit-border-radius: $radius;    border-radius: $radius;}　

　　Call the Mixed Macro description of parameters without values, You can do this, such:

.box {  @include border-radius(3px);}

 

　　

2. Inheritance

In sass, it also has an inheritance class style code block. In sass, the keyword "@ extend" is used to inherit the existing class style blocks, so as to inherit the code. For example:

//SCSS.btn {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;  @extend .btn;}.btn-second {  background-color: orange;  color: #fff;  @extend .btn;}

The compiled CSS is:

//CSS.btn, .btn-primary, .btn-second {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;}.btn-second {  background-clor: orange;  color: #fff;}

We can see that inheritance in Sass can inherit all the style code in the class style block, and the compiled CSS will combine the selector to form a combination selector.

 

3. placeholder % placeholder

The placeholder % placeholder in Sass is a very powerful and practical function that can replace the code redundancy caused by the base class in CSS. Because the code declared by % placeholder is not called by @ extend, no code is generated. For example:

%mt {  margin-top: 5px;}%pt{  padding-top: 5px;}

This code is not called by @ extend. It does not generate any code block, but is quietly lying in one of your SCSs files. Code is generated only when @ extend is called:

//SCSS%mt {  margin-top: 5px;}%pt{  padding-top: 5px;}.btn {  @extend %mt;  @extend %pt;}.block {  @extend %mt;  span {    @extend %pt;  }}

The compiled CSS is:

//CSS.btn, .block {  margin-top: 5px;}.btn, .block span {  padding-top: 5px;}

From the compiled CSS code, we can see that through the placeholder called by @ extend, the compiled code will combine the same code.

　　

However, sometimes we are struggling when to use a hybrid macro, when to use inheritance, and when to use placeholders? Let's look at a table first.

　　　　

　　　　

　　Suggestion:

1. If variables are involved in the code block, we recommend that you use a hybrid macro to create the same code block.

2. If your code block does not need to pass any variable parameters and a base class already exists in the file, we recommend that you use sass inheritance.

Sass hybrid macros, inheritance, placeholders