@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指令