当前位置 : 主页 > 网页制作 > css >

4.Scss嵌套

来源:互联网 收集:自由互联 发布时间:2021-06-13
Sass为我们提供了一种方便的操作方式:嵌套。在Sass中,共有3种嵌套方式: (1)选择器嵌套; 例如: $color1:red; $color2:green; $color3:blue; body { color:$color1; .column { color:$color2; .content-title

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