@media Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。来看一个简单示例: .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } 编译出来: .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } } @media 也可以嵌套 @media: @media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } } 此时编译出来: @media screen and (orientation: landscape) { .sidebar { width: 500px; } }