Question

我一直无法找到以缩进语法SASS包装媒体查询的有效方法，我尝试过以下方法：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx)
  .logo
    background: #F00

但这似乎不是有效的语法，如果删除包装它可以正常工作，但是当线条变得很长时，它会有点痛苦。这只能在一个地方使用，我不想创建一个mixin。

Answer 1

这不会是scss语法中的问题

一个例子：http://sassmeister.com/gist/11494141。

不幸的是，sass语法不支持多行

http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html#multiline_selectors

您可以将媒体查询参数作为变量放置，以获得更清晰的缩进并解决此问题（尽管这不是最佳解决方案）。

$media-queries: "(-webkit-min-device-pixel-ratio: 2) and (min--moz-device-pixel-ratio: 2) and (-o-min-device-pixel-ratio: 2 / 1) and (min-device-pixel-ratio: 2) and (min-resolution: 192dpi) and (min-resolution: 2dppx)"

@media only screen and #{$media-queries} 
  .logo 
    background: #F00

在缩进语法SASS中包装长媒体查询

1 个答案: