Sass 中的 @media 指令和 CSS 的使用規(guī)則一樣的簡(jiǎn)單，但它有另外一個(gè)功能，可以嵌套在 CSS 規(guī)則中。有點(diǎn)類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。來看一個(gè)簡(jiǎn)單示例：

.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;
    }
  }
}

此時(shí)編譯出來：

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

在使用 @media 時(shí)，還可以使用插件#{}:

$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; } }