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

电玩女神 2023-10-12 21:59 68阅读 0赞

#### 简介： ####

#### @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中非常有用的功能，它可以帮助我们避免重复编写代码，提高代码的可维护性和可重用性。通过将一个选择器的样式继承到另一个选择器上，我们可以更加高效地进行样式开发。**