[Sass] Parameters for mixed macros

[Sass] Mixed macro Parameters--pass a parameter without a value

Sass's mixed macros have a powerful function that can be used to pass parameters, then in the Sass there are several main parameters:

A) pass a parameter with no value

In a mixed macro, you can pass a parameter without any value, such as:

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

A parameter "$radius" with no value is defined in the mixed macro "Border-radius".

You can pass a parameter value to the mixed macro at the time of the call:

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

This means that a "Border-radius" value of "3px" is passed to the mixed macro.

The compiled CSS:

. box {  -webkit-border-radius:3px;  border-radius:3px;}

[Sass] Mixed macro Parameters--pass a parameter with a value

In Sass's mixed macro, you can also pass a default value to the parameters of a mixed macro, for example:

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

A parameter "$radius" was passed in the mixed macro "Border-radius", and the parameter was given a default value of "3px".

When calling a hybrid macro like this, there is an opportunity to assume that the rounded corners of your page are "3px" rounded corners, so you just need to call the default hybrid macro "Border-radius":

. btn {  @include Border-radius;}

The compiled CSS:

. btn {  -webkit-border-radius:3px;  border-radius:3px;}

Sometimes, however, some elements of the page have different fillet values, so you can randomly pass values to the mixed macro, such as:

. box {  @include Border-radius (50%);}

The compiled CSS:

. box {  -webkit-border-radius:50%;  border-radius:50%;}

[Sass] Mixed macro Parameters--pass multiple parameters

Sass a mixed macro can pass multiple parameters, in addition to a parameter, such as:

@mixin Center ($width, $height) {  width: $width;  Height: $height;  Position:absolute;  top:50%;  left:50%;  Margin-top:-($height)/2;  Margin-left:-($width)/2;}

Multiple parameters are passed in the Mixed macro "center". The actual call and its invocation are the same as the other hybrid macros:

. box-center {  @include Center (500px,300px);}

Compile out CSS:

. box-center {  width:500px;  height:300px;  Position:absolute;  top:50%;  left:50%;  Margin-top: -150px;  Margin-left: -250px;}

There is a special parameter "...". When you have too many parameters for a mixed macro, you can use parameters instead, such as:

@mixin Box-shadow ($shadows ...) {  @if Length ($shadows) >= 1 {    -webkit-box-shadow: $shadows;    Box-shadow: $shadows;  } @else {    $shadows: 0 0 2px Rgba (#000,.);    -webkit-box-shadow: $shadow;    Box-shadow: $shadow;  }}

In the actual call:

. box {  @include box-shadow (0 0 1px rgba (#000,. 5), 0 0 2px Rgba (#000,. 2));}

The compiled CSS:

. box {  -webkit-box-shadow:0 0 1px rgba (0, 0, 0, 0.5), 0 0 2px rgba (0, 0, 0, 0.2);  box-shadow:0 0 1px rgba (0, 0, 0, 0.5), 0 0 2px rgba (0, 0, 0, 0.2);}

[Sass] Mixed macro parameters--the lack of mixed macros

Mixed macros give us a lot of convenience in the actual coding, especially for reusing duplicate blocks of code . But the biggest disadvantage is that it generates redundant blocks of code . For example, when calling an identical mixed macro in different places. Such as:

@mixin border-radius{  -webkit-border-radius:3px;  border-radius:3px;}. box {  @include Border-radius;  margin-bottom:5px;}. btn {  @include Border-radius;}

The example invokes a defined "Border-radius" mixed macro in both ". Box" and ". Btn". First look at the compiled CSS:

. box {  -webkit-border-radius:3px;  border-radius:3px;  margin-bottom:5px;}. btn {  -webkit-border-radius:3px;  border-radius:3px;}

As can be seen in the example above, Sass does not intelligently merge the same style code blocks together when calling the same mixed macro. This is also the Sass of the mixed macro of the most shortcomings.

Like this:

. box {  margin-bottom:5px;}. BTN,. Box {  @include Border-radius;}

[Sass] Parameters for mixed macros