Sass-directives-media
提供：Dev Guides
Sass-メディアディレクティブ
説明
_ @ 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_ファイルを作成します。
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コードを medial ファイルに保存します。
- このHTMLファイルをブラウザで開くと、次のように出力が表示されます。
