CSS之Sass中的@mixin和@extend，使用详细（Sass中@mixin和@extend的区别）_sass mixin

简介：

@mixin：该指令用于定义可重用的代码块，可以在需要的地方进行调用。通过@mixin指令，你可以将一组样式代码封装成一个mixin，并在需要的地方使用@include指令来调用这个mixin，这样可以避免重复编写相同的样式代码，提高代码的可维护性和可重用性，该指令还可以接受参数，使得代码更加灵活。

@extend：该指令用于将一个选择器的样式继承到另一个选择器上。通过@extend指令，你可以将一个选择器的样式继承到另一个选择器上，从而避免重复编写相同的样式代码，该指令还可以处理选择器的嵌套关系，使得样式的继承更加灵活，但是同时要注意命名重复问题。

@extend和@mixin的区别：@mixin用于定义可重用的代码块，可以在需要的地方进行调用，可以接受参数，而@extend用于将一个选择器的样式继承到另一个选择器上，避免重复编写相同的样式代码，可以处理选择器的嵌套关系；@mixin可以自定义样式，并且传参，但@extend不可以。

一、@mixin

当我们在使用Sass进行样式开发时，难免会遇到一些重复的代码块，例如设置不同元素的样式或者应用相同的样式到不同的选择器上，这时就可以使用Sass提供@mixin指令，它允许你定义可重用的代码块，并在需要的地方进行调用。

@mixin指令的语法如下：

//定义@mixin为mixin-name
@mixin mixin-name {  //mixin的样式代码  }
 
//调用@mixin
.demo_box{  @include mixin-name;  }
 
//调用的时候使用@include

在mixin中可以编写任意的Sass样式代码，包括自定义属性、选择器、嵌套等。@mixin定义完成后，通过@include来直接调用继承@mixin下定义的公共样式。

这里我们举实例说明，

实例1

1、在下面实例中，我们定义了一个名为button-style的mixin，它包含了一些按钮的基本样式。然后我们在.button-small和.button-large选择器中使用@include指令来调用这个mixin，从而将按钮的样式应用到这些选择器上。

@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;
}

通过使用@mixin指令，我们可以避免重复编写相同的样式代码，提高代码的可维护性和可重用性。此外，mixin还可以接受参数，使得代码更加灵活，实例2是一个带有参数的mixin的实例。

实例2

2、在下面实例中，我们在@mixin定义的button-style中添加了两个参数bg−color和text-color，分别用于设置按钮的背景颜色和文字颜色。然后我们在@include指令中传入不同的参数值来调用这个@mixin，从而实现不同按钮的样式。

//这里的$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);
}

总结：@mixin指令是Sass中非常有用的功能，它可以帮助我们避免重复编写代码，提高代码的可维护性和可重用性。通过定义可重用的代码块，并在需要的地方进行调用，我们可以更加高效地进行样式开发。同时，mixin还可以接受参数，这使得代码更加灵活。

二、@extend

当我们在使用Sass进行样式开发时，你可能会遇到一些重复的样式代码，例如设置相同的样式到不同的选择器上。为了避免重复编写代码，Sass提供了@extend指令，它允许你将一个选择器的样式继承到另一个选择器上。

@extend指令的语法如下：

.selector { // 样式代码 } 
 
//直接使用就行
.another-selector { @extend .selector; }
 
//这里需要注意的是继承的时候@extend后要加，点类名（例：.selector）

在上面的例子中，我们定义了一个名为.selector的选择器，并在.another-selector选择器中使用@extend指令来直接调用继承.selector的样式。这样，.another-selector就会继承.selector的所有样式，这个比较简单。

1、这里我们也举实例说明，在下面实例中，我们在.button-default选择器中定义了一个嵌套选择器&:hover，用于设置按钮在鼠标悬停时的样式。

然后我们在.button-large选择器中使用@extend指令来继承.button-default的样式，并添加自己的样式。这样.button-large不仅继承了.button-default的基本样式，还继承了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;
}

总结：@extend指令是Sass中非常有用的功能，它可以帮助我们避免重复编写代码，提高代码的可维护性和可重用性。通过将一个选择器的样式继承到另一个选择器上，我们可以更加高效地进行样式开发。