SASSでのファイルのインポート

SASSファイルを扱う際、ドキュメント.scssからコードを転送したいが、拡張子.cssのクローンを作成せず、つまりそのフラグメントをインポートする必要がある場合があります。

例えば、次のようなコードを含むファイルnavbar.scssがあるとします：

.active {
	color: red;
}

このタイプのインポートを実行するには、まずファイル名の前にアンダースコアを追加する必要があります。このように：_navbar.scss。次に、別のファイルstyle.scssで、ディレクティブ@importを記述しますが、インポートするファイル名ではアンダースコアとファイル拡張子を指定しません：

@import "navbar";

そして、コンパイル後のstyle.cssにファイル_navbar.scssのコードがインポートされていることがわかります：

.active {
	color: red;
}

次の内容でファイルmain.scssを作成してください：

.block-content {
	padding: 10px;
	margin-left: auto;
	width: 600px;
	font-size: 14px;
}

次に、そのフラグメントをファイルstyles.scssにインポートし、styles.cssにコンパイルしてください。