scss-@media

　　首先回顧下css3中的@media

　　定義和使用：

　　使用 @media 查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式。

　　@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。

　　當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。

　　實例：若是文檔寬度小於 300 像素則修改背景顏色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

 

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

　　scss容許@media在css規則中進行嵌套，若是@media嵌套在CSS規則內，編譯時，@media將被編譯到文件的最外層，包含嵌套的父選擇器，scss代碼實例以下:

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

　　編譯成css代碼以下:

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

　　@media的queries容許互相嵌套使用，編譯時，scss自動添加and。

　　代碼實例以下:

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

　　編譯後的css代碼以下:

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

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