Как вставить селектор внутри Mixin?

Question

Я пытаюсь использовать в этом случае заполнитель внутри миксина, однако я получаю следующую ошибку:

"message": "You may not @extend an outer selector from within @media.\nYou may only @extend selectors within the same directive.\nFrom \"@extend %shadow-sm\" on line 7 of build/scss/components/cards/_form-register.scss\n",
  "formatted": "Error: You may not @extend an outer selector from within @media.\n       You may only @extend selectors within the same directive.\n       From \"@extend %shadow-sm\" on line 7 of build/scss/components/cards/_form-register.scss\n        on line 2 of build/scss/abstracts/placeholders/_shadows.scss\n>> %shadow-sm   { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; \n   ^\n"
}

Где мой миксин:

// BOOTSTRAP GRID
@mixin media-breakpoint-xs {
    @media (min-width: 320px) {
        @content;
    }
}

@mixin media-breakpoint-sm {
    @media (min-width: 576px) {
        @content;
    }
}

@mixin media-breakpoint-md {
    @media (min-width: 768px) {
        @content;
    }
}

@mixin media-breakpoint-lg {
    @media (min-width: 992px) {
        @content;
    }
}

@mixin media-breakpoint-xl {
    @media (min-width: 1200px) {
        @content;
    }
}

Где мой заполнитель:

%shadow-none { box-shadow: none !important; }
%shadow-sm   { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; }

МОЙ КОД:

@include media-breakpoint-lg {
    @extend %shadow-sm;
    width: 25rem;
}

Можно ли вставить заполнительи, может быть, даже миксин внутри другого миксина?

Если нет, то как лучше всего использовать хорошие практики?

Answer 1

Раньше у меня был цвет %placeholder, теперь я изменил и создал @mixin для того же поколения .. Что выглядело так:

$default-color-property-type-list: border-color, background-color, color;
$default-color-name-map: (
    'cream-1': #FAFAFA,
    'cream-2': #EFEFEF,
    'correct': #02C22B,
    'dark-blue-1': #3897F0,
    'dark-grey-2': #999999,
    'incorrect': #EE2D3E,
    'transparent': transparent,
    'white': white,
);

@mixin getColor($color-name, $color-property-type) {
    @if not map-has-key($default-color-name-map, $color-name) {
        @error 'The color #{$color-name} does not exist!';
    } @else if not index($default-color-property-type-list, $color-property-type) {
        @error 'The color type #{color-type} does not exist!';
    } @else {
        $color-value: map-get($default-color-name-map, $color-name);
        #{$color-property-type}: #{$color-value} !important;
    }
}

Скоро вставлю так, как я хотел (внутри другого @mixin) мне просто нужно дать @include в моих @mixin цветах таким образом:

@include media-breakpoint-NAME {
    @include getColor($color-name, $color-property-type);
}