sass混合器的使用

最新推荐文章于 2025-11-25 13:59:03 发布

原创最新推荐文章于 2025-11-25 13:59:03 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sass #前端

本文详细介绍了SCSS中的混合器（mixin）和继承（extend）的概念及用法。通过创建和引用混合器，可以复用相同CSS样式，提高代码效率。同时，讲解了如何定义和应用带有参数的混合器。此外，文章还探讨了继承的使用，展示了如何通过@extend关键字实现选择器之间的样式共享，以及占位符选择器%的应用，帮助读者深入理解SCSS的高级特性。

1、混合器

、@mixin 名字 {

相同的css样式

}

通过@include 来引用格式： @include 名字

带有参数的混合器

2、@mixin name($名字1，$名字2){

color:$名字

}

引用：@include name("样式1","样式2")

@mixin div {
    font-size: 10px;
    font-weight: 900;
}

// $red1:$color  把$color赋值给$red1
@mixin color($color, $border, $red1:$color) {
    color: $color;
    border: $border solid $red1;
    // background: $red1;
}

.div0 {
    // 混合选择器
    @include div;
    // 带有参数的选择器
    @include color(orange, 6px, blue)
}

.div1 {
    // 混合器选择器
    @include div;
    // 带有参数的选择器
    @include color(black, 1px, blue)
}

3.继承的使用

@extend .名字；

.btn {
    width: 100px;
    height: 40px;
    border: 0px;
}

.button1 {
    color: red;
    @extend .btn;   
}

.button2 {
    color: blue;
    @extend .btn;
}

.button3 {
    color: green;
    @extend .btn;
}