sass基础语法--嵌套与继承

1.嵌套
1-1.选择器嵌套

    /*选择器嵌套*/
    body{
        background: antiquewhite;
        header{
            background: aquamarine;
        }
    }

1-2.属性嵌套

    /*属性嵌套*/
       footer{
           background: {
               color: red;
               size: 100% 100%;
           }
       }

1-3.伪类嵌套+父类选择器

       li{
          &:before{
              color:red;
          } /*&为上一级选择器*/
          &:after{
              background: green;
          }
       }

1-4.跳出嵌套
开发中当嵌套的层数达到一定的时候有需要跳出嵌套的时候,sass中提供了@at-root来跳出嵌套.

    body{
    ...
    ...
       /*跳出嵌套*/
       @at-root .container{
           width: 996px;
       }
    }

这时候会跳出body的嵌套,根据实际需求选择使用.
编译后的css:

    .container {
      width: 996px;
    }

值得注意的是这种写法不会跳出媒体查询@media的嵌套,如果想跳出@media则需要加上参数,如下面例子:

    body{
           @media screen and (max-width:600px){
           /*跳出media媒体查询,但是没有跳出body*/
           @at-root(without:media){
              .container{
                  background: navajowhite;
              }
          }
         
       }
    }

这时候已经跳出media查询,但是没有跳出body嵌套,如果你想继续跳出去,加上rule参数即可

    body{
       @media screen and (max-width:600px){
            /*跳出media和body*/
           @at-root(without:media rule){
               .container{
                   background: saddlebrown;
               }
           }
       }
    }

2.继承@extend
2-1.简单继承

    .small{
        font-size: 14px;
    }
    .alert_info{
        @extend .small;
        color: red;
    }

2-2.多继承

    .alert{
        background: darkblue;
    }
    .small{
        font-size: 14px;
    }
    /*多个继承*/
    .alert_info{
        @extend .alert,.small;
        color: red;
    }

上面的.alter和.small都会一起编译到css输出文件中.隐藏一个问题,下面会说明.
2-3.链式继承

    /*链式继承*/
    .one{
        border: 1px solid red;
    }
     
    .two{
        @extend .one;
        color: saddlebrown;
    }
    .three{
        @extend .two;
        font-size: 14px;
    }

其实上面的继承隐藏着一个问题就是:假如被继承的样式不会被页面的html引用,这就造成了代码冗余,造成生成的css文件太大,影响渲染速度.为了解决这个问题,sass中采用了占位符%的方式进行优化.

    /*要使编译后不会出现代码冗余,必须使用占位选择器%*/
    %alert{
        background: darkblue;
    }
    .alert_info{
        @extend %alert;
        color: red;
    }

上面代码中%alter不会被编译到css输出文件中.

小结:虽然能继承的选择器有很多,但是还有不支持的.比如包含选择器(.one .two)或者是相邻兄弟选择器(.one+.two),同时如果被继承的元素a又有hover状态的形式,那么hover状态也会被继承下来,这个可能不是你想要的.所以应当注意这些问题.