@mixin and @extend in Sass of CSS, use in detail (the difference between @mixin and @extend in Sass)

Introduction:

@mixin : This directive is used to define reusable code blocks that can be called where needed. Through the @mixin directive, you can encapsulate a set of style codes into a mixin, and use the @include directive to call this mixin where needed, which can avoid repeating the same style code and improve code maintainability and reusability In addition, the instruction can also accept parameters, making the code more flexible.

@extend : This directive is used to inherit the style of one selector to another selector. With the @extend directive, you can inherit the style of one selector to another selector, thereby avoiding writing the same style code repeatedly. This directive can also handle the nesting relationship of selectors, making the inheritance of styles more flexible, but At the same time, pay attention to the problem of naming duplication.

The difference between @extend and @mixin : @mixin is used to define reusable code blocks, which can be called where needed and can accept parameters, while @extend is used to inherit the style of one selector to another selector, Avoid writing the same style code repeatedly, and can handle the nesting relationship of selectors; @mixin can customize styles and pass parameters, but @extend cannot.

1. @mixin

When we use Sass for style development, we will inevitably encounter some repeated code blocks, such as setting the style of different elements or applying the same style to different selectors. At this time, we can use Sass to provide @mixin instructions, which Allows you to define reusable code blocks and call them where needed.

The syntax of the @mixin directive is as follows:

//定义@mixin为mixin-name
@mixin mixin-name {  //mixin的样式代码  }

//调用@mixin
.demo_box{  @include mixin-name;  }

//调用的时候使用@include

You can write arbitrary Sass style code in mixin, including custom attributes, selectors, nesting, etc. After the definition of @mixin is completed, @include is used to directly invoke the public styles defined under @mixin.

Here we give an example to illustrate,

Example 1

1. In the following example, we define a mixin named button-style, which contains some basic styles of buttons. We then call this mixin using the @include directive on the .button-small and .button-large selectors to apply the button styles to those selectors.

@mixin button-style { 
    background-color: #f00;
    color: #fff;
    padding: 10px;
    border: none;
    border-radius: 5px;
} 

.button-small { 
    @include button-style;
} 

.button-large {
    @include button-style;
    font-size: 20px;
}

By using the @mixin directive, we can avoid writing the same style code repeatedly and improve the maintainability and reusability of the code. In addition, mixin can also accept parameters, making the code more flexible. Example 2 is an example of mixin with parameters.

Example 2

2. In the following example, we added two parameters bg−color and text-color to the button-style defined by @mixin, which are used to set the background color and text color of the button respectively. Then we pass in different parameter values ​​​​in the @include directive to call this @mixin to achieve different button styles.

//这里的$bg-color, $text-color是@mixin button-style中的自定义的属性
@mixin button-style($bg-color, $text-color) { 

                        //这里的background-color用了$bg-color；
                        background-color: $bg-color;  

                        //这里的color用了$text-color，当然其它元素也可以使用
                        color: $text-color;  

                        padding: 10px; 
                        border: none; 
                        border-radius: 5px;
} 

.button-small { 
    //这里调用了button-style，并给自定义属性$bg-color和$text-color传值red和blue
    @include button-style(red, blue);
} 

.button-large { 
    //这里也调用了button-style，并给自定义属性$bg-color和$text-color传值pink和plum
    @include button-style(pink, plum);
}

Summary: The @mixin directive is a very useful feature in Sass, it can help us avoid duplication of code, improve code maintainability and reusability. By defining reusable code blocks and calling them where needed, we can develop styles more efficiently. At the same time, mixins can also accept parameters, which makes the code more flexible.

2. @extend

When we use Sass for style development, you may encounter some duplicate style codes, such as setting the same style to different selectors. To avoid duplication of code, Sass provides the @extend directive, which allows you to inherit the styles of one selector to another.

The syntax of the @extend directive is as follows:

.selector { // 样式代码 } 

//直接使用就行
.another-selector { @extend .selector; }

//这里需要注意的是继承的时候@extend后要加，点类名（例：.selector）

In the above example, we defined a selector named .selector and used the @extend directive in the .another-selector selector to directly invoke the inherited .selector style . In this way, .another-selector will inherit all the styles of .selector, which is relatively simple.

1. Here we also give an example to illustrate. In the following example, we define a nested selector &:hover in the .button-default selector, which is used to set the style of the button when the mouse hovers over it.

Then we use the @extend directive in the .button-large selector to inherit the style of .button-default and add our own style. In this way, .button-large not only inherits the basic style of .button-default, but also inherits the style of hover.

.button-default { 
    background-color: #f00; 
    color: #fff; 
    padding: 10px; 
    border: none; 
    border-radius: 5px; 
    &:hover { 
        background-color: #00f;
    }
} 

.button-large { 
    @extend .button-default; 
    font-size: 20px;
}

Summary: The @extend directive is a very useful feature in Sass, it can help us avoid duplication of code, improve code maintainability and reusability. By inheriting the style of one selector to another selector, we can develop styles more efficiently.