Question

在这种情况下，我尝试在mixin中使用占位符，但是出现以下错误：

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

是否可以在另一个mixin内插入一个占位符甚至一个mixin？

如果没有，使用最佳做法的最佳方法是什么？

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

如何在Mixin中插入选择器？

1 个答案: