如何在不重复选择器的情况下为具有不同祖先的后代编写Sass？

在Sass中，可以使用嵌套选择器来为具有不同祖先的后代编写样式，而无需重复选择器。以下是一些方法：

使用父级选择器符号（&）：在Sass中，可以使用父级选择器符号（&）来引用父级选择器。通过在选择器中使用&，可以确保生成的CSS选择器与父级选择器保持一致。例如：

.parent {
  color: blue;

  .child {
    font-weight: bold;
    &:hover {
      color: red;
    }
  }
}

生成的CSS代码为：

.parent {
  color: blue;
}
.parent .child {
  font-weight: bold;
}
.parent .child:hover {
  color: red;
}

.parent {
  color: blue;

  @at-root .child {
    font-weight: bold;
  }
}

生成的CSS代码为：

.parent {
  color: blue;
}
.child {
  font-weight: bold;
}

.parent {
  color: blue;
}

.child {
  @extend .parent;
  font-weight: bold;
}

生成的CSS代码为：

.parent, .child {
  color: blue;
}

.child {
  font-weight: bold;
}

这些方法可以帮助我们在不重复选择器的情况下为具有不同祖先的后代编写Sass。在实际应用中，可以根据具体情况选择适合的方法。对于Sass的更多信息和用法，可以参考腾讯云的Sass相关产品和文档：

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云