从具有串联元素的类扩展

Posted 2023-03-06

【中文标题】从具有串联元素的类扩展

【英文标题】：Extend from a class that has a concatenated element

【发布时间】：2021-05-13 15:59:49

【问题描述】：

我目前正开始认真地使用 sass，但我还很菜鸟。我想知道如何以简单的方式将这些样式扩展到另一个类。

我有这种风格

.active-state + label 
    font-size: 70%;
    padding: 0.8rem 2rem;
  

并且想要扩展它，正好在另一个地方（同一个文件）。因为如果我这样做：

.another-class
    @extend .active-state;

没用。

我需要做一个 mixin 并将它包含在两个类中还是有办法避免这种情况？

【问题讨论】：

您能否将第一个样式的名称而不是 .active-state + label 更改为 .active-state, .label 并尝试再次扩展它或尝试创建另一个类并尝试使用单个名称对其进行扩展？

您也可以查看此链接以获取更多帮助including-another-class-in-scss

@MohamedBdr 标签是一个 html 节点，而不是一个类。不是这样的

对！，请检查此链接，因为我认为它对您有帮助 extending-in-sass

【参考方案1】：

您不能扩展嵌套选择器，但作为一种解决方法，您可以使用 placeholder selector 并对其进行扩展：

%myStyles 
   font-size: 70%;
   padding: 0.8rem 2rem; 


.active-state + label 
   @extend %myStyles;


.another-class 
   @extend %myStyles;

它将编译为：

.active-state + label, .another-class 
  font-size: 70%;
  padding: 0.8rem 2rem;