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

我正在致力于基于Bootstrap的响应式网站。我使用SCSS/SASS和Compass来优化CSS工作流程。在我SASS的代码，我有以下几点：在SCSS/SASS中嵌套的CSS3媒体查询

$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代码，在现代浏览器中工作得很好。但是respond.js解析它失败，因为它是正则表达式抓取第一个值，IE8以错误的方式呈现内容。

我搜索了很多，并没有发现任何提及这样的问题。我发现甚至失败的原因与responds.js：

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

这个表达式仅在媒体查询语句（thisq）认为首先发现min-width。因此，目前我有几种可能的解决方案（按严重性排列）：
1.尽管制动移动优先的概念，对于这种情况使用最大宽度媒体查询;
2.更改我的SCSS/SASS文件结构，并通过分离相同的类样式使其不易读取;
3.分叉并修改respond.js库;
4.后处理SASS的输出并重写破损的条目。

说实话，我对这些解决方案并不满意，而且我有一种感觉，SASS应该亲自处理这些案例，这是我的奇怪的SASS用例，它强制它的行为如此（除了使用SASS与Bootstrap，这是LESS供电）。任何人都可以在这里指出更简单/更好的解决方案吗？

来源

2014-01-28 Anton Boritskiy

我想不出一个更好的办法，你覆盖了大部分基地 –

@Zach，我的问题是SASS以某种方式加入了'screen'语句并且不会重复它，同时保持双'min-width'状态，感觉像是一个错误或从我身边滥用。 –

如果这是我的项目，我只是移动嵌套查询，所以它不再嵌套，但我不会说这是一个误用 –

合并相同的项目（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; 
    } 
}

来源

2014-01-28 18:10:02

您的解决方案是好的，谢谢你，我意识到我的问题的例子不清楚地表示我的问题，并且解决方案不能按原样应用。我改变了我的SASS结构，现在我使用了smth。非常接近你的答案。谢谢。 –

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

回答

相关问题