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

2023年9月3日 218次阅读

参见英文答案 >
SASS indented syntax on multiple lines?                                    2个

我一直无法找到以缩进语法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.

最佳答案 这不会是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
点赞