Sass @media指令

@media指令設定樣式規則，不同的媒體型別。可以巢狀@media指令選擇器在SASS內，但它被冒泡到樣式表的頂層。

範例

下面的例子演示了在SCSS檔案中如何使用@media：

media.html

<!doctype html>
<head><meta charset="UTF-8"> <title>Media指令範例-www.tw511.com</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="container">
    <h2>Example using media directive</h2>
    <img src="images/birds.png" class="style">
</body>
</html>

接下來，建立檔案media.scss。

style.scss

h2{
color: #77C1EF;
}

.style{
width: 900px;

@media screen and (orientation: portrait){
width:500px;
margin-left: 120px;
}
}

可以告訴SASS監視檔案，並隨時使用下面的命令更新SASS檔案來修改CSS：

sass --watch C:\Ruby22-x64\style.scss:style.css

接著執行上面的命令，它會自動建立media.css檔案，如下面的程式碼：

media.css

h2 {
  color: #77C1EF;
 }

.style {
  width: 900px;
  }
  @media screen and (orientation: portrait) {
    .style {
      width: 500px;
      margin-left: 120px;
      }
  }

執行輸出結果

讓我們來執行以下步驟，看看上面的程式碼執行結果：

儲存上述的HTML程式碼到 media.html 檔案。
在瀏覽器中開啟該HTML檔案，得到輸出如下顯示。