4.Scss嵌套

Posted 2022-12-10 hou-yuan-zhen

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

　　（1）选择器嵌套；

　　　　　　　　例如：　　　　　　

　　　　　　　　$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样式冗余，并且难以维护。尽量少用选择器嵌套的方式来书写Sass

（2）属性嵌套；相同的前缀可以拿出来。

例如：

　　　　

　　　　　　 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;

　　　　

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

（3）伪类嵌套或伪元素嵌套；

　　在Sass中，还有一种嵌套方式：伪类嵌套或伪元素嵌套。伪类嵌套（或伪元素嵌套）跟属性嵌套很像，只不过它是需要借助“&”符号一起配合使用。

常见的伪元素只有4个，即::before、::after、::first-letter、::first-line

举例：伪类嵌套：

       $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;

　　　　　　　　

伪元素嵌套同样也是结合“&”符号来实现的，编译的时候“&”会替换成相应的选择器。上面这个是清除浮动最常用的方法