• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

3.3 Sass嵌套

Sass为我们提供了一种方便的操作方式:嵌套。在Sass中,共有3种嵌套方式:

  • (1)选择器嵌套;
  • (2)属性嵌套;
  • (3)伪类嵌套;

一、选择器嵌套

选择器嵌套,是Sass中最常见的嵌套方式,这个类似于HTML元素的嵌套。这种嵌套方式我们在之前的章节接触过好几次了,现在再来看一个复杂点的例子。

举例:

 
$color1:red;
$color2:green;
$color3:blue;
body
{
    color:$color1;
    .column
    {
        color:$color2;
        .content-title
        {
            color:$color3;
        }
    }
}

编译出来的CSS代码如下:

 
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”;
  • ……

对于这些拥有相同前缀的属性,我们可以使用属性嵌套的方式来简化操作。

举例:

 
div
{
    width:100px;
    height:100px;
    font:
    {
        family:Arial;
        size:14px;
        weight:bold;
    }
}

编译出来的CSS代码如下:

 
div 
{
    width: 100px;
    height: 100px;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
}

分析:

对于属性嵌套,我们要特别注意一点:在需要嵌套的属性前缀后面一定要加英文冒号“:”,不然编译出来的就不是我们想要的效果。

在上面例子中,如果我们把font后面的冒号去掉,编译出来的CSS代码如下:

 
div 
{
    width: 100px;
    height: 100px;
}
div font 
{
    family: Arial;
    size: 14px;
    weight: bold;
}

这就完全不是我们预期的效果了。刚刚接触Sass的小伙伴们一定要特别留意这一点。

举例:

 
div
{
    border:
    {
        top:1px solid red;
        bottom:1px solid green;
    }
}

编译出来的CSS代码如下:

 
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教程”进阶部分(即将上线)。

举例:伪类嵌套

 
$color1:red;  
$color2:green;
a{  
    color:$color1; 
    &:hover
    {  
        color:$color2;
    }
}

编译出来的CSS代码如下:

 
a
{
    color: red;
}
a:hover 
{
    color: green;
}

分析:

伪类嵌套都是结合“&”符号来实现的,编译的时候“&”会替换成相应的选择器。

举例:伪元素嵌套

 
.clearfix
{
    *zoom:1;
    &:after
    {
        clear:both;
        content:"";
        display:block;
        height:0;
        visibility:hidden;
    }
}

编译出来的CSS代码如下:

 
.clearfix{*zoom:1;}
.clearfix::after
{
    clear:both;
    content:"";
    display:block;
    height:0;
    visibility:hidden;
}

分析:

伪元素嵌套同样也是结合“&”符号来实现的,编译的时候“&”会替换成相应的选择器。上面这个是清除浮动最常用的方法,具体原理可以参考“HTML和CSS进阶教程”中“9.5清除浮动”这一节。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部