参见英文答案 >
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