### **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; } } ~~~