发表于： 2018-12-09 21:35:48
1 916
今天完成的事情：
1、今天仔细修改了一下task11和task12的所有细节，达到了标准。
明天计划的事情：
1、明天计划全力冲刺任务，用最短的时间完成所有任务。
遇到的问题：
1、今天主要是修改之前的任务，也让自己对sass的运用更加熟练，没有遇到什么问题。
收获：
1、
Sass嵌套
Sass为我们提供了一种方便的操作方式：嵌套。在Sass中，共有3种嵌套方式：
- （1）选择器嵌套；
- （2）属性嵌套；
- （3）伪类嵌套；
一、选择器嵌套
选择器嵌套，是Sass中最常见的嵌套方式，这个类似于HTML元素的嵌套。这种嵌套方式我们在之前的章节接触过好几次了，现在再来看一个复杂点的例子。
举例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $color1:red;$color2:green;$color3:blue;body{ color:$color1; .column { color:$color2; .content-title { color:$color3; } }} |
编译出来的CSS代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 | body { color: red;}body .column { color: green;}body .column .content-title{ color: blue;} |
分析：
选择器嵌套这种方式虽然操作起来很方便，但是却有一个很大的弊端：嵌套的层级越深，编译出来的CSS代码的选择器层级也越深。这种嵌套方式会导致CSS样式冗余，并且难以维护。
在CSS中，选择器的层级越多，浏览器解析时匹配的次数就越多，因而速度就越慢。因此在定义选择器的时候，我们要尽量让选择器的层级少一些，最好不要超过3层。所以在实际开发中，我们应该尽量注意一下Sass选择器嵌套中的层级问题，尽量少用选择器嵌套的方式来书写Sass。
CSS选择器的性能比较复杂，具体参考“HTML和CSS进阶教程”中“12.6高性能的选择器”这一节，看完会对选择器的原理有非常深入的理解。
二、属性嵌套
在Sass中，还为我们提供了一种属性嵌套的方式。我们都知道，CSS有些属性的前缀是相同的，例如：
- （1）border-top、border-right、border-bottom、border-left这4个属性拥有相同的前缀“border”；
- （2）margin-top、margin-right、margin-bottom、margin-left这4个属性拥有相同的前缀“margin”；
- （3）font-family、font-size、font-weight、font-variant等属性拥有相同的前缀“font”；
- ……
对于这些拥有相同前缀的属性，我们可以使用属性嵌套的方式来简化操作。
举例：
1 2 3 4 5 6 7 8 9 10 11 | div{ width:100px; height:100px; font: { family:Arial; size:14px; weight:bold; }} |
编译出来的CSS代码如下：
1 2 3 4 5 6 7 8 | div { width: 100px; height: 100px; font-family: Arial; font-size: 14px; font-weight: bold;} |
分析：
对于属性嵌套，我们要特别注意一点：在需要嵌套的属性前缀后面一定要加英文冒号“:”，不然编译出来的就不是我们想要的效果。
在上面例子中，如果我们把font后面的冒号去掉，编译出来的CSS代码如下：
1 2 3 4 5 6 7 8 9 10 11 | div { width: 100px; height: 100px;}div font { family: Arial; size: 14px; weight: bold;} |
这就完全不是我们预期的效果了。刚刚接触Sass的小伙伴们一定要特别留意这一点。
举例：
1 2 3 4 5 6 7 8 | div{ border: { top:1px solid red; bottom:1px solid green; }} |
编译出来的CSS代码如下：
1 2 3 4 5 | div { border-top: 1px solid red; border-bottom: 1px solid green;} |
三、伪类嵌套或伪元素嵌套
在Sass中，还有一种嵌套方式：伪类嵌套或伪元素嵌套。伪类嵌套（或伪元素嵌套）跟属性嵌套很像，只不过它是需要借助“&”符号一起配合使用。
对于伪类，我们在“CSS入门教程”中的 “CSS超链接伪类”接触过了。CSS3也增加很多伪类，如:first-child、nth-child()等。
伪元素跟伪类是不一样的，常见的伪元素只有4个，即::before、::after、::first-letter、::first-line。对于伪元素和伪类的区别，具体请参考“CSS3教程”进阶部分（即将上线）。
举例：伪类嵌套
1 2 3 4 5 6 7 8 9 | $color1:red; $color2:green;a{ color:$color1; &:hover { color:$color2; }} |
编译出来的CSS代码如下：
1 2 3 4 5 6 7 8 | a{ color: red;}a:hover { color: green;} |
分析：
伪类嵌套都是结合“&”符号来实现的，编译的时候“&”会替换成相应的选择器。
举例：伪元素嵌套
1 2 3 4 5 6 7 8 9 10 11 12 | .clearfix{ *zoom:1; &:after { clear:both; content:""; display:block; height:0; visibility:hidden; }} |
编译出来的CSS代码如下：
1 2 3 4 5 6 7 8 9 | .clearfix{*zoom:1;}.clearfix::after{ clear:both; content:""; display:block; height:0; visibility:hidden;} |
分析：
伪元素嵌套同样也是结合“&”符号来实现的，编译的时候“&”会替换成相应的选择器。上面这个是清除浮动最常用的方法，具体原理可以参考“HTML和CSS进阶教程”中“9.5清除浮动”这一节。
返回列表
评论