第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;
}
---------------------