Sass @media指令

本節我們學習 Sass 中的 @media 指令，@media 指令用於設置樣式規則到不同的媒體類型，這和 CSS 的使用規則差不多，但是它還有一點不同，就是 @media 指令可以嵌套在 Sass 選擇器中。有點類似於 JS 冒泡功能，它會冒泡到樣式表的頂層。

@media指令的使用

示例：

.xkd{
    width: 300px;
    height: 100px;
    @media screen and (orientation: portrait) {
      width: 500px;
    }
}

編譯成 CSS 代碼：

.xkd {
  width: 300px;
  height: 100px;
}
@media screen and (orientation: portrait) {
  .xkd {
    width: 500px;
  }
}

orientation 用於定義輸出設備中的頁面可見區域高度是否大於或等於寬度，可選值有兩個，portrait 表示指定輸出設備中的頁面可見區域高度大於或等於寬度，除了 portrait 值情況外，都爲 landscape。

@media 支持嵌套

示例：

例如我們在一個 @media 中嵌套另一個 @media：

@media screen {
    .xkd {
      @media (orientation: landscape) {
        color: #ccc;
      }
    }
}

編譯成 CSS 代碼：

@media screen and (orientation: landscape) {
  .xkd {
    color: #ccc;
  }
}