发表于: 2018-11-24 20:34:57
1 660
今天完成的事情:将任务11
明天计划的事情: 任务12
遇到的问题:其他一些sass规则没有应用的空间增长不了经验
收获:本次任务主要引用:
变量;
嵌套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
解开嵌套规则时,用父规则中的选择器替代&
。
评论