搜索过但找不到答案..
我有一个元素(由外部平台生成)具有以下类:p-button 和 button。
现在SCSS是这样的:
.p-button {
&.button {
margin: 10px;
}
}
但我想使用 mixin include 进行重构(这是一个大项目,所以除了使用 mixin 之外没有其他方法可以使这段代码更好)。 mixin 采用给定的选择器并应用一个 .给它。我无法更改 mixin,因为它被许多其他团队使用,所以我无法将 & 符号与选择器一起传递。我试过这个:
.p-button {
& {
@include button-appearance("button") {
margin: 10px;
}
}
}
但这不起作用(在它之间放置一个空格)。你不能这样做:
.p-button {
&@include button-appearance("button") {
margin: 10px;
}
}
有人知道吗?
编辑:这是mixin
@mixin button-appearance(
$appearance-class,
$show,
$background-color,
$background-image,
$background-position) {
$sel: $button-selector;
@if $appearance-class {
$sel: $sel + '.' + $appearance-class;
}
#{$sel} {
@include normalized-background-image($background-image);
@include show($show);
background-color: $background-color;
background-position: $background-position;
}
@content;
}
编辑 2:这是 $button-selector(我无法在平台中编辑它,但可能会在我自己的项目中覆盖它?)
$button-class: 'p-button';
$button-selector: '.#{$button-class}';
最佳答案
大家终于找到解决办法了。我刚刚从 .p-button 混合包含中删除了 &.button,现在它可以工作了:
@include button-appearance ("button") { *styles* }
@include button-appearance () { *styles* }
关于sass - SCSS 中的 & 符号和混入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55047446/