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状态也会被继承下来,这个可能不是你想要的.所以应当注意这些问题.