Sass的继承@extend

1,sass继承的简单实现

sass文件common.scss

@charset "utf-8";.fl{  float: left;}.box{  width: 300px;  height: 300px;  @extend .fl}

sass编译后输出的.css文件

.fl, .box {  float: left; }.box {  width: 300px;  height: 300px; }

以上我们可以看到:

1,.box继承了.fl的浮动属性2,sass编译后自动将公共样式提取出来

---

2,占位选择器

sass文件common.scss

.clearfix{  *zoom: 1;  &:after,  &:before{    content: '';    display: table;  }  &:after{    clear: both;  }}

sass编译后

.clearfix {  *zoom: 1; }  .clearfix:after, .clearfix:before {    content: '';    display: table; }  .clearfix:after {    clear: both; }

如果不希望.clearfix这个选择器,可以使用占位选择器,只需要将.变成%即可

%clearfix{  *zoom: 1;  &:after,  &:before{    content: '';    display: table;  }  &:after{    clear: both;  }}

此时sass编译不会编译此选择器,只有当被使用(继承)时,才会被编译

.test{  @extend %clearfix;}

sass编译后的.css文件

.test {  *zoom: 1; }  .test:after, .test:before {    content: '';    display: table; }  .test:after {    clear: both; }