Wrapping long media queries in Indented Syntax SAS

问题:

This question already has an answer here:

• SASS indented syntax on multiple lines? 2 answers

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

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.

回答1:

This won't be an issue in a scss syntax

An example: http://sassmeister.com/gist/11494141.

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