Амперсанд и миксины в SCSS - PullRequest
Новая
       20

Амперсанд и миксины в SCSS

1 голос
/ 07 марта 2019

Искал, но не могу найти ответ ..

У меня есть элемент, который генерируется (внешней платформой) со следующими классами: кнопка p и кнопка.

Теперь SCSS выглядит так: 

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

Но я хочу провести рефакторинг с использованием включений в миксин (это большой проект, поэтому нет другого способа улучшить этот код, кроме использования миксинов). Миксин берет данный селектор и применяет. к этому. Я не могу изменить миксин, так как он используется многими другими командами, поэтому я не могу передать амперсанд вместе с селектором. Я попробовал это: 

.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-class: 'p-button';

$button-selector: '.#{$button-class}';

Ответы [ 2 ]

0 голосов
/ 11 марта 2019

Каждый, наконец, нашел решение.Я только что удалил кнопку & .button из включения микшера .p-button, и теперь он работает: 

@include button-appearance ("button") { *styles* }
@include button-appearance () { *styles* }
0 голосов
/ 08 марта 2019

Отредактировал ответ после редактирования исходного вопроса, добавив использованный и немодифицируемый миксин

Оригинальный миксин не добавляет '@content', переданный в миксин, к сгенерированному селектору.,Поэтому, если вы не можете изменить исходный миксин, единственный способ - добавить свои свойства вне миксина.Согласно миксину селектор будет соответствовать предопределенной переменной $ button-selector, поэтому он не будет использовать ваш класс.

Итак, если вы хотите использовать тот же класс, определенный в '$ button-class', попробуйте следующее: 

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

Будет выводить: 

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