乐趣区

关于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-textmy_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 选择器的后辈选择器。

总结

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

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

退出移动版