css - 用缩进语法 SASS 包装长媒体查询

This question already has answers here:

SASS indented syntax on multiple lines?

(2 个回答)


6年前关闭。




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

关于css - 用缩进语法 SASS 包装长媒体查询，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23429137/