SASS 和媒体查询聚合

Question

使用 Sass，我有以下 mixin：

@mixin ss($property, $value, $value-smallscreen) {
  #{$property}: $value;
  @media screen and (max-height: $smallscreen-maxheight) {
    #{$property}: $value-smallscreen;
  }
}

.Header
{
  @include ss('height', $RowHeight, $RowHeight-smallscreen);
  @include ss('font-size', $HeaderFontsize, $HeaderFontsize-smallscreen);
}

我遇到的“问题”是这会生成两个@media 语句。也就是说，它会生成以下 CSS：

.Header {
  height: 41px;
  font-size: 11pt; }
  @media screen and (max-height: 768px) {
    .Header {
      height: 35px; } }
  @media screen and (max-height: 768px) {
    .Header {
      font-size: 9pt; } }

我想知道的是，有没有办法两者兼得：

• 将定义放在一起，以确保为大屏幕和小屏幕添加样式，并且
• 只有一个“@media”部分。

Answer 1

我当前的一个项目需要这种方法来处理 SASS 结构，我的解决方案是使用 CSS 后处理器（如 Pleeease）来观察 CSS 输出，以便在 SASS/Compass 输出时观察 CSS 文件。

这允许实时媒体查询打包以及其他优化。