sass @mixin @extend

sass中的@mixin混入 和 @extend继承

@mixin

需要使用@include mixin-name； 就可以直接使用

@extend 继承

可以直接继承通用的css 不用再单独去添加class类型

使用示例

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