描述
@media指令将样式规则设置为不同的媒体类型。可以将@media指令嵌套在选择器SASS中，但它会冒泡到样式表的顶层。
例
以下示例演示了SCSS文件中@media的使用：
media.htm
<!doctype html>
<head>
<title>Media directive Example</title>
<link rel = "stylesheet" href = "media.css" type = "text/css" />
</head>
<body class = "container">
<h2>Example using media directive</h2>
<img src = "/sass/images/birds.jpg" class = "style">
</body>
</html>接下来，创建文件media.scss。
media.scss
h2 {
color: #77C1EF;
}
.style {
width: 900px;
@media screen and (orientation: portrait) {
width:500px;
margin-left: 120px;
}
}您可以使用以下命令，让SASS监视文件并在SASS文件更改时更新CSS：
sass --watch C:\ruby\lib\sass\media.scss:media.css
接下来，执行以上命令；它将使用以下代码自动创建media.css文件：
media.css
h2 {
color: #77C1EF;
}
.style {
width: 900px;
}
@media screen and (orientation: portrait) {
.style {
width: 500px;
margin-left: 120px;
}
}作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1712.html
支付宝 
微信 