@media

Question

I持って、次のSASS：

.branded 
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) 
    @media screen and (orientation:portrait) 
     background-image: url("../img/fbc/citroen_640x960.jpg") 
    @media screen and (orientation:landscape) 
     background-image: url("../img/fbc/citroen_960x640.jpg") 
    background-size: 50% 

と、それは以下のCSSに解析されます。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { 
    .branded { 
     background-size: 50%; 
    } 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and screen and (orientation:portrait) { 
    .branded { 
     background-image: url("../img/fbc/citroen_640x960.jpg"); 
    } 
} 

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and screen and (orientation:landscape) { 
    .branded { 
     background-image: url("../img/fbc/citroen_960x640.jpg"); 
    } 
} 

私はそれが動作していない見て、私は、この行のエラーを取得：

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) and screen and (orientation:landscape) { 

なぜそれがあり、そしてどのように来るSASSパーサーがエラーでCSSを作成しますか？それは私の間違いかSASSesですか？

Answer 1

@mediaを標準CSSに混ぜることはできませんが、nesting in SASSも可能です。

私は間違っているかもしれないが、私はエラーが混入から来ることができると思う：@media only screen及び（-webkit-MIN-デバイスピクセル比：2）、only screen及び（MIN-デバイスピクセル比：2 ）とscreen（オリエンテーション：横）

これを試してみてください。

.branded 
    @media only screen 
    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) 
     background-size: 50% 
     @media (orientation:portrait) 
     background: url("../img/fbc/citroen_640x960.jpg") 
     @media (orientation:landscape) 
     background: url("../img/fbc/citroen_960x640.jpg")