Shulou(Shulou.com)06/01 Report--

This article mainly introduces the use of @ mixin and @ include in Sass, which has a certain reference value. Interested friends can refer to it. I hope you can learn a lot after reading this article.

Sass is a precompiled language for CSS. It provides variables (variables), nesting (nested rules), mixing (mixins), functions and other functions, and is fully compatible with CSS syntax. Sass can help complex stylesheets be more organized and make it easy to share designs within or across projects.

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

The @ include directive introduces mixin into the document.

Define a mix

Mixin is defined by the @ mixin directive. @ 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: the connection symbol of Sass is the same as the underscore symbol _, that is, @ mixin important-text {} is the same mix as @ mixin important_text {}.

Use blending

The @ include directive can be used to include a mix:

Sass @ include mixes the syntax:

Selector {@ include mixin-name;}

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

Example

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

Convert the above code to CSS code, as follows:

Css Code:

Font-weight {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;}

Passing variables to the mix can receive parameters.

We can pass variables to the mix.

Define the blending that can receive parameters:

Example

/ * mix to receive two parameters * / @ mixin bordered ($color, $width) {border: $width solid $color;}. MyArticle {@ include bordered (blue, 1px); / / call mix and pass two parameters}. MyNotes {@ include bordered (red, 2px); / / call mix and pass two parameters}

The blending parameters of the above example are the properties that set 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);} H2 {@ 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;} H2 {border-color: blue; border-width: 2in; border-style: dashed;}

Variable parameter

Sometimes we can't determine how many arguments a mixin or a function (function) will take, so we can use... To set variable parameters.

For example, a mixin used to create a box shadow (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;}

It is also very convenient for browser prefixes to use mixed browser prefixes, as shown in the following 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);} Thank you for reading this article carefully. I hope the article "what's the use of @ mixin and @ include in Sass" shared by the editor will be helpful to you. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.