第8章 全機能Sassリファレンス
8-4 @ルールとディレクティブ
■@import Sassの@import は通常のCSSの @import と同じ機能に加えSass独自の機能も有ります。 --------------------- ▼Sass @import url("main.scss"); @import url(main.scss); @import "main.scss"; @import 'main.scss'; --------------------- ■@media Sassの@mediaでは、ルールセット内で使うことができます。 --------------------- ▼Sass .side { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } --------------------- ▼CSS(コンパイル後) .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } } --------------------- ■@extend 指定したセレクタのスタイルを継承することができる機能です。 --------------------- ▼Sass .box { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } .item { @extend .box; } --------------------- ▼CSS(コンパイル後) .box, .item { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } ---------------------