How to insert a selector inside a Mixin? - sass

Question

I'm trying to use in this case a placeholder inside a mixin, however I get the following error:
"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"
}
Where my Mixin is:
// 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;
}
}
Where my Placeholder is:
%shadow-none { box-shadow: none !important; }
%shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important; }
MY CODE:
#include media-breakpoint-lg {
#extend %shadow-sm;
width: 25rem;
}
Is it possible to do insert a placeholder and or maybe even a mixin inside another mixin?
If not, what would be the best way to use good practices?

Answer 1

Before I had a color %placeholder, now I changed and created a #mixin for the same generation .. Which looked like this:
$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;
}
}
Soon to insert the way I was wanting (inside another #mixin), I just need to give an #include in my #mixin of colors this way:
#include media-breakpoint-NAME {
#include getColor($color-name, $color-property-type);
}