4.Scss嵌套

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;         } 伪元素嵌套同样也是结合“&”符号来实现的,编译的时候“&”会替换成相应的选择器。上面这个是清除浮动最常用的方法
上一篇:Scss基本运算-------字符运算


下一篇:1.Sass的认识