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;
　　　　　　　　}
伪元素嵌套同样也是结合“&”符号来实现的，编译的时候“&”会替换成相应的选择器。上面这个是清除浮动最常用的方法
posted @ 2019-10-01 14:41  Moliy-Moliy  阅读(1095)  评论(0)  编辑  收藏  举报