_ @ media_ディレクティブは、スタイルルールを異なるメディアタイプに設定します。 _ @ media_ディレクティブはセレクターSASS内にネストできますが、スタイルシートの最上位までバブルされます。
次の例は、SCSSファイルでの_ @ media_の使用を示しています-
<!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_ファイルを作成します。
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_ファイルを自動的に作成します-
h2 {
color: #77C1EF;
}
.style {
width: 900px;
}
@media screen and (orientation: portrait) {
.style {
width: 500px;
margin-left: 120px;
}
}上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-
