Question

我正在开发一个基于Bootstrap的响应式网站。我使用SCSS / SASS和Compass来优化CSS工作流程。在我的SASS代码中，我有以下内容：

$sm-screens-and-wider: "screen and (min-width: 768px)";
$lg-screens: "screen and (min-width: 1200px)";

@media #{$sm-screens-and-wider} {
    .search-copyright-tab .copyright {
      font-size: 19px;
      @media #{$lg-screens} {
        font-size: 21px;
      }
    }
}

这导致以下CSS：

@media screen and (min-width: 768px) {
  .search-copyright-tab .copyright {
    font-size: 19px;
  }
}

@media screen and (min-width: 768px) and (min-width: 1310px) {
  .search-copyright-tab .copyright {
    font-size: 21px;
  }
}

请注意第二个媒体查询中重复的min-width。这是有效的CSS代码，在现代浏览器中工作得很好。但是response.js无法解析它，因为它的正则表达式抓住第一个值而IE8以错误的方式呈现内容。

我搜索了很多内容，并没有找到任何类似问题的提及。我发现甚至为什么它失败了responds.js：

minw : thisq.match( /\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),

此正则表达式仅考虑在媒体查询语句（min-width）中首先找到thisq。所以目前我有几种可能的解决方案（按严重程度排列）：
1.对于这种情况使用max-width媒体查询，尽管制动移动优先概念;
2.通过分离相同的类样式来更改我的SCSS / SASS文件结构并降低其可读性;
3.分叉并修改respond.js库;
4.对SASS的输出进行后处理并重写损坏的条目。

说实话，我对这些解决方案都不满意，而且我觉得SASS应该自己处理这些情况，这是我的奇怪的SASS用例，它强制它的行为就像那样（除了使用SASS与Bootstrap，由LESS供电）。任何人都可以在这里指出更简单/更好的解决方案吗？

Answer 1

合并相同的项目（screen）而不是min-width是合理的，因为它们是不同的。我发现SASS实际上很少理解CSS规则在设计上的有效性，以便将来证明自己。

我不习惯使用具有多个查询的合并查询，这不仅是因为您遇到的问题，而且因为它仍然需要通过网络传输宝贵的浪费字节。

我会使用@include来定义@media查询，因为它比你正在使用的字符串方法更好一些，并且这样做，我认为这与你的解决方案一样可读问题：

// The mixins can be defined in some shared file
@mixin media-gte-sm {
  @media screen and (min-width: 768px) {
    @content;
  }
}
@mixin media-gte-lg {
  @media screen and (min-width: 1200px) {
    @content;
  }
}

.search-copyright-tab .copyright {
  @include media-gte-sm {
    font-size: 19px;
  }
  @include media-gte-lg {
    font-size: 21px;
  }
}

SCSS / SASS中的嵌套CSS3媒体查询

1 个答案: