### **1.8 @media在sass中寫法和轉化** **注意：** Sass中的@media指令和CSS的使用規則一樣簡單，但是它有另一個功能，可以嵌套在css規則中。 a、如果**在一個class類的樣式中使用@media指令，它將冒泡到外面，同時把該類名嵌套到@media中**。 列：sass的樣式 ~~~ .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } ~~~ 轉化成css ~~~ .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar {//嵌套到media里面了。 width: 500px; } } ~~~ b、**在@media一個類名中再嵌套一個@media，轉化成css時這兩個@media的名稱將合并** 列：sass樣式 ~~~ @media screen { .box{ margin-top:50px; } .sidebar { @media (orientation: landscape) { width: 500px; } } } ~~~ 轉化成css樣式 ~~~ @media screen { .box { margin-top: 50px; } } @media screen and (orientation: landscape) { .sidebar { width: 500px; } } ~~~ c、**使用@media時，還可以結合插值#{}使用。** 列：scss樣式 ~~~ $media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media #{$media} and ($feature: $value) { .sidebar { width: 500px; } } ~~~ 轉化成css樣式 ~~~ @media screen and (-webkit-min-device-pixel-ratio: 1.5) { .sidebar { width: 500px; } } ~~~