如何在 SASS 中的单个查询中组合相同的媒体查询答案

【问题标题】：How to combine same media queries inside single query in SASS如何在 SASS 中的单个查询中组合相同的媒体查询
【发布时间】：2021-09-26 19:57:49
【问题描述】：

我曾经像这样在 LESS 的一个地方合并我的媒体查询

少：

.media-mixin(@break) when (@break = 1200px) {
  .abc{
       color: red;
  }
}
.media-mixin(@break) when (@break = 1200px) {
  .xyz{
       color: yellow;
  }
}

@media all and (max-width: 1200px) {
  .media-mixin(1200px);
}

CSS 结果

@media all and (max-width: 1200px) {
  .abc{
     color: red;
  }
  .xyz{
       color: yellow;
  }
}

如何转换上述mixin或在SASS中做同样事情的最佳方法是什么，到目前为止我找不到简单的方法。

【问题讨论】：

根据 sass 存储库上的that comment，没有计划对媒体查询进行分组，因为 sass 专注于作为处理器而不是压缩器。
为什么不先写一个媒体查询？

标签： html css sass less scss-mixins

【解决方案1】：

不确定在 Sass 中是否有一种简单的方法可以做到这一点。

你可以反过来想它，并在内部使用带有媒体查询的 mixin：

@mixin media-mixin($selector, $rule, $value) {
    @media all and (max-width: 1200px) {
        #{$selector} {
            #{$rule}: $value;
        }
    }
}

@include media-mixin(p, color, red);

还可以扩展它以获取属性和值列表：

@mixin media-mixin($selector, $rules...) {
    @media all and (max-width: 1200px) {
        #{$selector} {
            @each $rule in $rules {
                #{nth($rule, 1)}: nth($rule, 2);
            }
        }
    }
}

@include media-mixin(p, (color, red), (background-color, blue));

/* More complex selectors need quotes */
@include media-mixin(".container > p", (color, red), (background-color, blue));

【讨论】：