SCSS 中的 & 符号和混入

Question

已搜索但找不到答案..

我有一个元素（由外部平台生成）具有以下类：p 按钮和按钮。

现在的SCSS是这样的：

.p-button {
    &.button {
        margin: 10px;
    }
 }

但我想使用 mixin include 进行重构（这是一个大项目，所以除了使用 mixin 之外没有其他方法可以使这段代码更好）。 mixin 采用给定的选择器并应用一个 .给它。我无法更改 mixin，因为它被许多其他团队使用，所以我无法将 & 符号与选择器一起传递。我试过这个：

.p-button {
    & {
        @include button-appearance("button") {
           margin: 10px;
        }
    }
 }

但这不起作用（在它之间放置一个 space）。你不能这样做：

.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}';

Answer 1

在编辑原始问题后编辑了答案，添加了已使用且不可修改的 mixin

原始的 mixin 不会将传递给 mixin 的“@content”附加到生成的选择器中。所以如果你不能修改原来的 mixin，唯一的办法就是在 mixin 之外添加你的属性。根据 mixin，选择器将匹配预定义的“$button-selector”变量，因此它不会使用您的 class.

因此，如果您想使用在“$button-class”中定义的相同 class，请尝试以下操作：

#{$button-selector}.button {
    margin: 10px;
}

将输出：

.p-button.button {
    margin: 10px;
}

Answer 2

各位，终于找到解决办法了。我刚刚从 .p-button 混合包含中删除了 &.button，现在它可以工作了：

@include button-appearance ("button") { *styles* }
@include button-appearance () { *styles* }

SCSS 中的 & 符号和混入

Ampersand and mixins in SCSS

sass

mixins