13.6. Sass @ mixin and @ include

@mixin directive allows us to define a style that can be reused throughout the stylesheet.

@include directive can introduce mixin into the document.

13.6.1. Define a mix ¶

Mixin through @mixin directive to define. @mixin name { property: value; property: value; ... } , the following example creates a mix named “important-text”:

Sass Code:

@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; } 

Note: Sass connection symbols-and underscore symbols _ are the same, that is, @mixin important-text { } and @mixin important_text { } It’s the same blend in.

Use blending ¶

@include directive can be used to include a mix:

Sass @include mix in the syntax:

selector { @include mixin-name; } 

Therefore, include important-text the mixing code is as follows:

Example

.danger { @include important-text; background-color: green; } 

Convert the above code to CSS code, as follows:

Css Code:

.danger { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; background-color: green; } 

Blending can also include blending, as follows:

Example

@mixin special-text { @include important-text; @include link; @include special-border; } 

13.6.2. Pass variables to blending ¶

Blending can receive parameters.

We can pass variables to the mix.

Define the blending that can receive parameters:

Example

/\* Mixing in and receiving two parameters \*/ @mixin bordered($color, $width) { border: $width solid $color; } .myArticle { @include bordered(blue, 1px); // Call mixing and pass two parameters } .myNotes { @include bordered(red, 2px); // Call mixing and pass two parameters } 

The blending parameter of the above example is the property that sets the border ( color and width ).

Convert the above code to CSS code, as follows:

Css Code:

.myArticle { border: 1px solid blue; } .myNotes { border: 2px solid red; } 

You can also define default values for mixed parameters. The syntax format is as follows:

Example

@mixin bordered($color: blue, $width: 1px) { border: $width solid $color; }

When including blending, you only need to pass the required variable name and its value:

Example

@mixin sexy-border($color, $width: 1in) { border: { color: $color; width: $width; style: dashed; } } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 2in); } 

Convert the above code to CSS code, as follows:

Css Code:

p { border-color: blue; border-width: 1in; border-style: dashed; } h1 { border-color: blue; border-width: 2in; border-style: dashed; } 

Variable parameter ¶

Sometimes we are not sure how many arguments are used by a mixin or a function (function), so we can use… to set variable parameters.

For example, a mixin used to create a box box-shadow can take any number of``box-shadow`` as a parameter.

Example

@mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); } 

Convert the above code to CSS code, as follows:

Css Code:

.shadows { -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; } 

13.6.3. Browser prefixes using blending ¶

It is also very convenient for browser prefixes to be mixed, as shown in thefollowing example:

Example ¶

@mixin transform($property) { -webkit-transform: $property; -ms-transform: $property; transform: $property; } .myBox { @include transform(rotate(20deg)); } 

Convert the above code to CSS code, as follows:

Css Code: ¶

.myBox { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 