編程教程Sass 媒體指令
描述
@media指令設置樣式規則到不同的媒體類型。@media指令可以嵌套在選擇器SASS中，但它會冒泡到樣式表的頂層。
例子
以下示例演示如何在SCSS文件中使用@media:
media.html
<!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="/attachments/tuploads/sass/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;
}
}輸出
讓我們執行以下步驟，看看上面的代碼如何工作:
將以上html代碼保存在media.html文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
