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

我想知道的是，两者都有：

将定义放在一起，以确保为大屏幕和小屏幕添加样式，
只有一个＆＃39; @ media＆＃39;部分。

Answer 1

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

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

SASS和媒体查询聚合

1 个答案: