关于css:Sass混合的使用

本节咱们学习 Sass 中的混合，Sass 中的混合是通过 @mixin 指令来定义的，混合容许咱们定义能够在整个样式表中重复使用的款式，防止应用无语意的类。混合能够蕴含所有的 CSS 规定和任何其余在 Sass 文档中被容许应用的内容。

定义混合

Sass 中能够通过 @mixin 指令定义混合，@mixin 前面接混合的名称和可选的 arguments 参数，以及混合的内容块。

示例：

例如创立一个名为 my-text 的混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
}

此时咱们运行代码，上述混合是不会被编译到 CSS 代码中的，只有当咱们应用了这个混合时，才会被编译。

留神，Sass 的连贯符号 - 和下划线 _ 是雷同的，也就是说 my-text 与 my_text 是一样的。

混合的应用

混合定义好后，咱们就能够在选择器应用混合，能够通过 @include 来应用这混合。@include 调用会把混合器中的所有款式提取进去放在 @include 被调用的中央。

示例：

例如咱们应用下面定义好的混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
}

p{@include my_text();
}

编译成 CSS 代码：

p{
  font-size: 12px;
  color: #fdef92;
  font-weight: bold;
}

从上述代码能够看出，在选择器 p 中的所有款式属性全副来自 my-text 这个混合器。

混合中除了应用款式属性，还能够蕴含选择器，当一个蕴含选择器的混合通过 @include 蕴含在一个父选择器中时，在混合中的选择器最终会被嵌套在父选择器中。

示例：

例如咱们定义一个混合，这个混合中蕴含一个选择器 .child，而后在另一个选择器中应用这个混合：

@mixin my-text {
    font-size: 12px;
    color: #fdef92;
    font-weight: bold;
    .child{background-color: #68f7f7;}
}

.other{@include my_text();
}

编译成 CSS 代码：

.other {
  font-size: 12px;
  color: #fdef92;
  font-weight: bold;
}
.other .child{background-color: #68f7f7;}

咱们在 .other 选择器中调用 my-text，而后能够看到在编译成的 CSS 代码中，.child 选择器变为了 .other 选择器的后辈选择器。

总结

尽管混合很好用，然而也不能乱用，大量的重用可能会导致生成的样式表过大，导致加载迟缓。所以咱们要留神混合的应用场景，如果一段代码应用的频率很高，那么就能够将这段代码形成一个混合。

判断一组属性是否应该组合成一个混合，一条教训法令就是你是否为这个混合想出一个好的名字。如果你能找到一个很好的短名字来形容这些属性润饰的款式，那么往往可能结构一个适合的混合器，反之这个混合可能并不适宜。