Question

是否可以使用嵌套@extend SCSS占位符，并将结果反映在生成的类中？

给定嵌套占位符：

webpack --config webpack.config.vendor.js
webpack

我目前必须做以下事情：

%my-form-field {
  ...

  &__label {
    ...
  }

  &__feedback {
    ...
  }
}

但我希望能够将其简化为：

.one-of-many-targets {
  @extend %my-form-field;

  &__label {
    @extend %my-form-field__label;
  }

  &__feedback {
    @extend %my-form-field__feedback;
  }
}

......让它解决：

.one-of-many-targets {
  @extend %my-form-field;
}

有没有不同的方法来编写我的占位符和@extends来使SCSS更清洁，就像在第二个例子中一样？

Answer 1

您可以使用mixin代替：

@mixin my-form-field() {
  width: 10px;
  &__label {
    width: 20px;
  }

  &__feedback {
     width: 30px;
  }
}

.one-of-many-targets {
  @include my-form-field();
}

将生成：

.one-of-many-targets {
  width: 10px;
}
.one-of-many-targets__label {
  width: 20px;
}
.one-of-many-targets__feedback {
  width: 30px;
}

Answer 2

您可以尝试使用selector.append()

请参阅：https://github.com/sass/sass/issues/2808#issuecomment-574413393

另请参阅更多信息，为什么在仅扩展选择器中父选择器不起作用：https://github.com/sass/sass/issues/2262#issuecomment-291645428

在SCSS中扩展嵌套占位符

2 个答案: