举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > css 混合模式 5-2. 混合器中的CSS规则

css 混合模式 5-2. 混合器中的CSS规则

2023-05-30 17:20 Sass教程

css 混合模式 5-2. 混合器中的CSS规则

css 混合模式 5-2. 混合器中的CSS规则

css 混合模式

混合器中不仅可以包含属性,也可以包含css规则,包含选择器和选择器中的属性,如下代码:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

当一个包含css规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则。举个例子,看看下边的sass代码,这个例子中使用了no-bullets这个混合器:

ul.plain {
  color: #444;
  @include no-bullets;
}

sass@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终,上边的例子如下代码:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器中的规则甚至可以使用sass的父选择器标识符&。使用起来跟不用混合器时一样,sass解开嵌套规则时,用父规则中的选择器替代&

如果一个混合器只包含css规则,不包含属性,那么这个混合器就可以在文档的顶部调用,写在所有的css规则之外。如果你只是为自己写一些混合器,这并没有什么大的用途,但是当你使用一个类似于Compass的库时,你会发现,这是提供样式的好方法,原因在于你可以选择是否使用这些样式。

接下来你将学习如何通过给混合器传参数来让混合器变得更加灵活和可重用。

阅读全文
以上是名动网为你收集整理的css 混合模式 5-2. 混合器中的CSS规则全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们