在缩进语法SASS中包含长型媒体查询 [英] Wrapping long media queries in Indented Syntax SASS

问题描述

我无法找到以缩进的语法SASS封装媒体查询的有效方式，我已尝试过以下操作：

I've been unable to find a valid way of wrapping media queries in indented syntax SASS, I've tried the following:

@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。

But this does not appear to valid syntax, it works fine if the wrapping is removed, but it's a bit of a pain as the line becomes very long. This is only ever used in one place, and I don't want to create a mixin.

推荐答案

scss语法中的问题

This won't be an issue in a scss syntax

示例： http：/ /sassmeister.com/gist/11494141 。

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

Unfortunately sass syntax doesn't support multiple line

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

您可以将媒体查询参数作为变量，以获得更清晰的缩进，并解决这个问题（虽然这不是最好的解决方案）。

You could place the media queries parameters as a variable to have a cleaner indentation and to solve this issue (although it's not the best solution).

$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中包含长型媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！