2022-04-20 Sass学习笔记(四) Sass的混入(mixin),继承(extend)和导入(import)

1.Sass混入 @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。

语法

定义:

@mixin mixin-name{
    }

使用:

selector {
    @include mixin-name;
}

2.Sass继承 @extend 与 继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

使用场景

一个样式与另外一个样式几乎相同，只有少量的区别

语法

selector1  {
    css样式1
}selector2  {
    @extend .selector1//css样式2
}
//最后选择器2会获得css样式1+css样式2

3.Sass导入 @import

@import 指令可以让我们导入其他文件等内容。

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

语法

@import filename;//包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。