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

Answer 1

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

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

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

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

将输出：

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

Answer 2

每个人，终于找到了解决方案。我刚刚从.p-button mixin包含中删除了＆.button，现在可以使用了：

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

SCSS中的“＆”号和混合器

2 个答案: