SCSS @media

@media功能在scss和在css中基本一樣，只是增強了一下。

關於@media在css中的用法可以參閱css3 Media Queries媒體查詢一章節。

scss允許@media在css規則中進行巢狀，如果@media巢狀在CSS規則內，編譯時，@media將被編譯到檔案的最外層，包含巢狀的父選擇器，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

編譯成css程式碼如下:

[CSS] 純文字檢視 複製程式碼
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
  } 
}

@media的queries允許互相巢狀使用，編譯時，scss自動新增and。

程式碼例項如下:

[CSS] 純文字檢視 複製程式碼
@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
  } 
}

@media當然也可以使用scss中的變數、運算子以及函式，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
 
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

被編譯後的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; 
  } 
}