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

问题描述

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

更少：

@Configuration
@ConfigurationProperties("test")
@Data
@Validated
public class Config {
    @NotBlank
    private String host;
    @NotBlank
    private String port;
    @NotBlank
    private String username;
}

CSS 结果

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

如何转换上述 mixin 或在 SASS 中执行相同操作的最佳方法是什么，到目前为止我找不到简单的方法。

解决方法

不确定在 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",blue));