[英]Extending a Nested Placeholder in SCSS
Is it possible to @extend a SCSS placeholder with nesting, and have that nesting reflected in the resulting class?是否可以使用嵌套来@extend SCSS 占位符,并将该嵌套反映在生成的类中?
Given a nested placeholder:给定一个嵌套占位符:
%my-form-field {
...
&__label {
...
}
&__feedback {
...
}
}
I currently have to do the following:我目前必须执行以下操作:
.one-of-many-targets {
@extend %my-form-field;
&__label {
@extend %my-form-field__label;
}
&__feedback {
@extend %my-form-field__feedback;
}
}
But I'd like to be able to simplify this to:但我希望能够将其简化为:
.one-of-many-targets {
@extend %my-form-field;
}
... and have it resolve to: ... 并决定:
.one-of-many-targets { ... }
.one-of-many-targets__label { ... }
.one-of-many-targets__feedback { ... }
Is there a different way to write my placeholder and @extends to make the SCSS cleaner, as in the 2nd example?是否有不同的方法来编写我的占位符和 @extends 以使 SCSS 更干净,如第二个示例所示?
You can use a mixin instead:您可以使用 mixin 代替:
@mixin my-form-field() {
width: 10px;
&__label {
width: 20px;
}
&__feedback {
width: 30px;
}
}
.one-of-many-targets {
@include my-form-field();
}
will generate:将产生:
.one-of-many-targets {
width: 10px;
}
.one-of-many-targets__label {
width: 20px;
}
.one-of-many-targets__feedback {
width: 30px;
}
You could try use selector.append()
你可以尝试使用selector.append()
See:https://github.com/sass/sass/issues/2808#issuecomment-574413393参见:https ://github.com/sass/sass/issues/2808#issuecomment-574413393
Also see more info why parent selector didn't work as you expect in extend-only selectors:https://github.com/sass/sass/issues/2262#issuecomment-291645428另请参阅更多信息,为什么父选择器在仅扩展选择器中没有按预期工作:https ://github.com/sass/sass/issues/2262#issuecomment-291645428
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.