Sass 扩展占位符和常规类

我对SASS@extend、占位符类和插值有点问题

我试图保持HTML尽可能干净，因此我决定使用@extend函数和占位符类。但是，我主要扩展与布局相关的类，如grid、list等，这就是为什么我在声明中混合使用占位符和常规类，即：

%drawer,
.drawer {
 ...
}

一切都进行得很顺利，只是有一刻我注意到主类中变量为“与”的插值导致了一些问题。示例代码（删除了大多数CSS规则）：

以及分机代码：

.product-drawer {
  @extend %drawer;

  &__content {
    @extend %drawer__content;
  }
}

但是，编译后的CSS输出如下所示：

.drawer--left .product-drawer,
.drawer--left .drawer__content {
  left: 0;
  transform: translate(-100%, 0);
}

您可能会注意到第一行是多余的，实际上是错误的。此外，“product drawer”扩展没有输出“&_optional-element”位，这让它非常奇怪。这种情况只发生在使用$this插值的规则上

一旦我从原始声明中删除了常规的“.drawer”类（并且只保留了%drawer），问题就消失了，但是在这些布局相关的类（.grid、.list）中，我们也希望保留常规类名，以便在一些简单的情况下也可以使用它，无需编写新的CSS并将其扩展为占位符类

我知道这可以通过将占位符类（%drawer）与常规占位符类（.drawer）完全分离，然后在常规的“.drawer”声明中扩展占位符类来解决，但这只会复制代码。。。或者我的方法是设计错误的

---

谢谢大家!

问题不在于

@extend

规则。问题是占位符是类的浅拷贝。如果从类扩展，则将继承其所有属性，但如果从占位符扩展，则仅复制第一级

请参见此示例：

%placeholder{
  content: 'placeholder';
  &__element{
    content: 'placeholder__element';
  }
}

.a{
  @extend %placeholder;
}

.class{
  content: 'class';
  &__element{
    content: 'class__element';
  }
}

.b{
  @extend .class;
}

通过使用这两个属性，您将强制占位符类同时使用以下属性：

 %placeholder,
.class{
  content: 'class';
  &__element{
    content: 'class__element';
  }
}

.b{
  @extend %placeholder;
}

---

问题不在于

@extend

规则。问题是占位符是类的浅拷贝。如果从类扩展，则将继承其所有属性，但如果从占位符扩展，则仅复制第一级

请参见此示例：

%placeholder{
  content: 'placeholder';
  &__element{
    content: 'placeholder__element';
  }
}

.a{
  @extend %placeholder;
}

.class{
  content: 'class';
  &__element{
    content: 'class__element';
  }
}

.b{
  @extend .class;
}

通过使用这两个属性，您将强制占位符类同时使用以下属性：

 %placeholder,
.class{
  content: 'class';
  &__element{
    content: 'class__element';
  }
}

.b{
  @extend %placeholder;
}

---

谢谢你的回复！你的第二个例子是我非常清楚的，这就是我所期望的结果。该问题与“$this”变量中存储的与符号的插值有关。这是我在原始邮件中发布的具体示例。感谢您的回复！你的第二个例子是我非常清楚的，这就是我所期望的结果。该问题与“$this”变量中存储的与符号的插值有关。这是我在原始邮件中发布的具体示例。

.b,
.class {
  content: 'class';
}


.class__element {
  content: 'class__element';
}