SCSS 中的Mixins 和 Includes，%是什么意思

SCSS 中的 @mixin 指令允许定义可以在整个样式表中重复使用的样式，而 @include 指令用于将这些混入（mixin）引入到文档中。

复制代码

@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}

.danger {
@include important-text;
background-color: green;
}

上述代码中，.danger 类将包含 important-text 混入定义的所有样式属性。转换为 CSS 后，.danger 类将具有红色文本、25px 字体大小、粗体字重和蓝色边框，以及绿色背景色。

参数化混入

混入还可以接收参数，使得每次调用时都可以定制其行为。例如，创建一个接收颜色和宽度参数的边框混入：

复制代码

@mixin bordered($color, $width) {
border: $width solid $color;
}

.myArticle {
@include bordered(blue, 1px);
}

.myNotes {
@include bordered(red, 2px);
}

在上面的例子中，.myArticle 和 .myNotes 类将分别具有蓝色和红色边框。

可变参数

当不确定混入或函数会使用多少个参数时，可以使用 ... 来设置可变参数。例如，创建一个盒子阴影的混入可能需要接受任意数量的阴影值作为参数：

复制代码

@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}

.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

在这个例子中，.shadows 类将具有两个不同的阴影效果。

浏览器前缀和混入

使用混入来处理浏览器前缀也非常方便。例如，创建一个用于变换属性的混入：

复制代码

@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;

}

.myBox {
@include transform(rotate(20deg));
}

转换为 CSS 后，.myBox 类将具有适用于不同浏览器的旋转变换样式。

通过这些示例，可以看出 SCSS 的混入和包含功能如何简化和优化样式表的编写，使得代码更加干净、可维护，并且易于重用。

补充：%

复制代码

 %container {
  @include container;
  @include grid-background;
}

'%container' 是什么意思？'%' 是干什么用的？

占位符选择器：%

Sass 支持一种特殊类型的选择器，称为"占位符选择器"。这些看起来像 class 和 id 选择器，除了 # 或 . 替换为 %。它们旨在与@extend 指令一起使用；

@extend：在某个class类中使用表示继承xx类的样式

例如：@extend %box

在不使用任何@extend 的情况下，使用占位符选择器的规则集将不会被呈现给 CSS。（即：占位符选择器有一个额外的属性，它们不会显示在生成的 CSS 中，只有扩展它们的选择器才会包含在输出中。）

%是一个占位符选择器。它自己不做任何事情，但可以扩展，就像抽象基类一样。

SCSS 语法：

复制代码

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

.reset-buttons {
  @extend %toolbelt;
  color: #cddc39;
}

CSS 输出：

复制代码

.action-buttons, .reset-buttons {
  box-sizing: border-box;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
  padding: 16px 0;
  width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
  border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
  color: #4285f4;
}

.reset-buttons {
  color: #cddc39;
}

简单抽象对比示例：