Question

下面的代码显示＆＃34;你可能不会@extend＆＃34; @extend外部选择器。错误。没有第二集媒体查询（最小宽度：1025px）它工作正常＆amp;编译预期结果。

// Input (SCSS)
// ---------------------------------------------------------------------------
@mixin highlight($count) {
    > * {
        @extend %notification;
        width: 45px;
    }
}
@media only screen and (min-width: 1025px) {
    %notification {
        width: auto;
        float: none;
    }
    .help {
        @include highlight(2);
    }
    .push {
        @include highlight(2);
    }
    .pull {
        @include highlight(2);
    }
}
@media only screen and (min-width: 769px) {
    %notification {
        width: auto;
        float: none;
    }
    .help {
        @include highlight(2);
    }
    .push {
        @include highlight(2);
    }
    .pull {
        @include highlight(2);
    }
}


// Expected Output(CSS)
// ---------------------------------------------------------------------------
@media only screen and (min-width: 1025px) {
    .help > *,
    .push > *,
    .pull > * {
        width: auto;
        float: none;
    }
    .help > * {
        width: 45px;
    }
    .push > * {
        width: 45px;
    }
    .pull > * {
        width: 45px;
    }
}
@media only screen and (min-width: 769px) {
    .help > *,
    .push > *,
    .pull > * {
        width: auto;
        float: none;
    }
    .help > * {
        width: 45px;
    }
    .push > * {
        width: 45px;
    }
    .pull > * {
        width: 45px;
    }
}

Answer 1

如果你遵守SASS的规则是不可能的。你不能在许多@media中使用一个@EXTEND，但你可以在一个@media中使用一个@extend。

// Input (SCSS)
// ---------------------------------------------------------------------------
@mixin highlight($count, $placeHolder : notification ) {
    > * {
        @extend %#{$placeHolder}!optional;
        width: 45px;
    }
}

@media only screen and (min-width: 1025px) {
    %notification {
        width: auto;
        float: none;
    }
    .help {
        @include highlight(2);
    }
    .push {
        @include highlight(2);
    }
    .pull {
        @include highlight(2);
    }
}


@media only screen and (min-width: 769px) {
    %notification2 {
        width: auto;
        float: none;
    }
    .help {
        @include highlight(2,notification2);
    }
    .push {
        @include highlight(2,notification2);
    }
    .pull {
        @include highlight(2,notification2);
    }
}

我在http://sassmeister.com/

上对此进行了测试

第二组@media中的SCSS @extend无法正常工作

1 个答案: