SCSS中的Ampersand和mixins

Question

搜索过但未找到答案..

我有一个元素，由外部平台生成，具有以下类：p-button和button。

现在SCSS如下：

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

但我希望使用mixin includes进行重构（这是一个大型项目，除了使用mixins没有其他更好的方法来改善代码）。mixin接受给定的选择器并在其前添加"."。我无法更改mixin，因为它被许多其他团队使用，所以我无法将&符号与选择器一起传递。我尝试过以下方法：

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

但这不起作用（会在它之间放置一个空格）。你无法这样做：

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

有人有线索吗？

编辑：这里是混合器

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

- R-b-n

---

你是否只是想要继承 .button 类的样式，用于 .p-button 选择器？ - pjones235

@R-b-n，你能在你的问题中添加$button-selector的值吗？ - muecas

谢谢查看，刚刚完成了！ - R-b-n

@R-b-n 看起来你永远无法使用mixin将内容插入到选择器中。'@content'关键字在生成的选择器之外。因此，你应该使用简单的选择器来完成这个操作。 - muecas

@R-b-n请检查我的修改后的答案。希望能有所帮助。 - muecas

Answer 1

大家好，终于找到解决方案了。我只需从.p-button mixin中移除&.button，并且现在它可以工作了：

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

- R-b-n

Answer 2

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

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

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

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

会输出：

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

- muecas

---

OP说他们不能改变mixin。 - Arkellys

@Arkellys，您能否在您的问题中添加“$button-selector”的值？ - muecas

我不确定理解了吗？ - Arkellys

@Arkellys，你正在使用的mixin使用一个变量来定义基本选择器名称$sel: $button-selector;；$button-selector是一个变量，不在mixin的作用域内，并且没有被定义为mixin参数。因此，该变量是在mixin外部定义的。 - muecas

哦，我觉得你把我和楼主搞混了，你应该把这个评论发在问题上。:) - Arkellys