前言:
当前姐妹们对“sass使用教程”都比较关心,看官们都想要分析一些“sass使用教程”的相关知识。那么小编在网上网罗了一些有关“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 选择器的后代选择器。
总结
虽然混合很好用,但是也不能乱用,大量的重用可能会导致生成的样式表过大,导致加载缓慢。所以我们要注意混合的使用场景,如果一段代码使用的频率很高,那么就可以将这段代码构成一个混合。
判断一组属性是否应该组合成一个混合,一条经验法则就是你能否为这个混合想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式,那么往往能够构造一个合适的混合器,反之这个混合可能并不适合。
标签: #sass使用教程