SASS（混合器，继承，运算方式）

最新推荐文章于 2024-05-08 10:21:53 发布

lik-7

最新推荐文章于 2024-05-08 10:21:53 发布

阅读量501

点赞数

分类专栏： sass 文章标签： sass css

本文链接：https://blog.csdn.net/m0_68169119/article/details/125977675

版权

本文详细介绍了SASS中的混合器（Mixin）、继承以及运算方式。混合器通过@mixin定义，@include引用，允许传参以复用样式代码，但可能导致CSS膨胀。继承使用@extend实现，减少了代码重复，但需谨慎使用以防选择器个数过多。此外，还探讨了SASS的颜色、字符串、数值、列表、地图等函数的运用。

摘要由CSDN通过智能技术生成

一、混合(Mixin)

1.理解：包含多个样式的‘变量’，定义的混合若不使用，就不会解析到css样式中；使用过后，解析时，相当于将定义的样式复制到使用的位置。

优点：可以传参。

缺点：因为解析时是复制代码，解析后会有大量代码。

2、定义 @mixin
在 sass 中使用 @mixin 标识符来定义混合器，相当于给一段代码赋予了一个名字，然后就可以在其他地方通过引用来复用这段代码。

@mixin 可以被缩写为 =

3.引用 @include
当我们定义好混合器之后，我们就可以通过 @include 标识符来引用混合器。在哪个地方进行引用，混合器的代码就会插入到哪个地方。

@include 可以缩写为 +

4、混合器传参
sass在定义混合器时，可以提前定义好形参，然后在引用时，传递参数，生成特定样式，跟JS的函数时分类似，实参会按照顺序一一传递给形参。

@mixin hunhe {
    color: red;
    font-size: 20px;
    font-family: 楷体;
    text-decoration: none;
}

a {
    @include hunhe;
    background-color: green;
    border-radius: 10px;
}

@mixin btn {
    width: 100px;
    height: 40px;
    border-radius: 10px;