Sass 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

继承多个选择器

在编写的过程中,往往会遇到一个选择器要继承多个选择器的样式,那么这应该怎么办呢?看看下面的小实例吧。

SCSS代码

.one {
    width:100px;height:100px;
}
.two {
    /*继承的样式*/
    @extend .one;
    @extend .three;
    /*独立的样式*/
    background:red;
    border:5px solid #000;
}
.three {
    padding:10px;
}

编译后的CSS代码

.one, .two {
  width: 100px;
  height: 100px;
}

.two {
  background: red;
  border: 5px solid #000;
}

.three, .two {
  padding: 10px;
}