@media指令設置樣式規則，不同的媒體類型。可以嵌套@media指令選擇器在SASS內，但它被冒泡到樣式表的頂層。
示例
下麵的例子演示了在SCSS檔中如何使用@media：
media.html
<!doctype html>
<head><meta charset="UTF-8"> <title>Media指令示例-www.xuhuhu.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檔，得到輸出如下顯示。
上一篇：
Sass @import指令
下一篇：
Sass @extend指令