使用Sass在媒体查询中扩展选择器

CSS

Stafan小哥

2020-03-18

我有一个项目类和一个紧凑的“修饰符”类：

.item { ... }
.item.compact { /* styles to make .item smaller */ }

这可以。但是，我想添加一个@media查询，.item以在屏幕足够小时强制类紧凑。

乍一想，这就是我试图做的事情：

.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
  .item { @extend .item.compact; }
}

但这会产生以下错误：

您不能从@media内部扩展外部选择器。您只能在同一指令中使用@extend选择器。

我如何使用SASS来完成此任务而不必诉诸复制/粘贴样式？

第2082篇《使用Sass在媒体查询中扩展选择器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

Stafan路易 2020.03.18

我使用断点，但思路相同：

@mixin bp-small {
    @media only screen and (max-width: 30em) {
        @content;
    }

如何使用它：

.sidebar {
    width: 60%;
    float: left;
    @include bp-small {
        width: 100%;
        float: none;
    }
}

有关于mixin 的文字，您可以在其中找到有关此选项的更多信息。

凯理查德番长 2020.03.18

我相信SASS / SCSS不支持@extend媒体查询中的指令。http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/

尽管需要根据您的目标权衡代码膨胀，但是您可能需要使用mixin。

前端Stafan阿飞 2020.03.18

简单的答案是：您不能这样做，因为Sass不能（或不会）为其构成选择器。您不能在媒体查询中，也不能扩展媒体查询之外的内容。如果只复制它的一个副本而不是尝试组成选择器，那肯定会很好。但是，事实并非如此。

使用混入

如果您要在媒体查询的内部和外部重用代码块，并且仍然希望它能够对其进行扩展，请编写一个mixin和一个extend类：

@mixin foo {
    // do stuff
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 30em) {
    .bar {
        @include foo;
    }
}

从外部将选择器扩展到媒体查询中

这不会真正帮助您的用例，但这是另一种选择：

%foo {
  @media (min-width: 20em) {
    color: red;
  }
}

@media (min-width: 30em) {
  %bar {
    background: yellow;
  }
}

// usage
.foo {
  @extend %foo;
}

.bar {
  @extend %bar;
}