8. HTML - SCSS - @import 分割したファイルの読み込み

 
8.1 概要
8.2 インポート

8.1 概要

 何度も言って、恐縮ですが、このドメインでは複数のサイトを使い分けています。  それぞれのサイトごとに .scss → .css を作っておるのですが。  例えば、別の項で述べている「メディアクエリ」の定義なんかは、いくつかのサイトで使いまわしたいわけです。  つまり

//	モバイル・スマートフォン
//	 	iPad Pro		1024x1366
//
// 		iPad 			 768x1024
//
// 		iPhone8 Plus	 414x 736
//	 	iPhone7 Plus	 414x 736
// 		iPhone6 Plus	 414x 736
//
//	 	Nexus5X			 412x 732
//	 	Nexus6P			 412x 732
//
//	 	iPhoneX			 375x 812
//	 	iPhone8			 375x 667
//	 	iPhone7			 375x 667
//	 	iPhone6			 375x 667
//
//	 	Galaxy5S		 360x 640
//
//	 	iPhone5			 320x 568

$breakpoint-down:
(
	'mx-1024': 'all and (max-width: 1024px)',
	'mx-0768': 'all and (max-width:  768px)',
	'mx-0414': 'all and (max-width:  414px)',
	'mx-0412': 'all and (max-width:  412px)',
	'mx-0375': 'all and (max-width:  375px)',
	'mx-0360': 'all and (max-width:  360px)',
	'mx-0320': 'all and (max-width:  320px)',
) !default;

@mixin mq-down($breakpoint: mx-1024)
{
	@media #{map-get($breakpoint-down, $breakpoint)}
	{
		@content;
	}
}

img
{
	max-width: 800px;
	height: auto;

	@include  mq-down(mx-0768) {	width:  768px;  }
	@include  mq-down(mx-0414) {	width:  414px;  }
	@include  mq-down(mx-0412) {	width:  412px;  }
	@include  mq-down(mx-0375) {	width:  375px;  }
	@include  mq-down(mx-0360) {	width:  360px;  }
	@include  mq-down(mx-0320) {	width:  320px;  }
}
 てなことを一気に書いておりますが

	・・・略・・・

$breakpoint-down:
(
	'mx-1024': 'all and (max-width: 1024px)',
	'mx-0768': 'all and (max-width:  768px)',
	'mx-0414': 'all and (max-width:  414px)',
	'mx-0412': 'all and (max-width:  412px)',
	'mx-0375': 'all and (max-width:  375px)',
	'mx-0360': 'all and (max-width:  360px)',
	'mx-0320': 'all and (max-width:  320px)',
) !default;

@mixin mq-down($breakpoint: mx-1024)
{
	@media #{map-get($breakpoint-down, $breakpoint)}
	{
		@content;
	}
}
 の部分はファイルとして分割しておき・・・。  分割したファイルをインポートして、下記の部分はサイトごとの記述にしたいと。

img
{
	max-width: 800px;
	height: auto;

	@include  mq-down(mx-0768) {	width:  768px;  }
	@include  mq-down(mx-0414) {	width:  414px;  }
	@include  mq-down(mx-0412) {	width:  412px;  }
	@include  mq-down(mx-0375) {	width:  375px;  }
	@include  mq-down(mx-0360) {	width:  360px;  }
	@include  mq-down(mx-0320) {	width:  320px;  }
}
 どうやらその機能はあるようなので・・・。  この項は「Sass 応用(ファイル分割(@import)、関数(@function)、継承(@extend)、@mixin, @include, @content)」を参考にさせていただきました。

8.2 インポート

 参考サイトによれば、わたしとしてはいささか違和感がありますが、被インポートファイル名には先頭に _(アンダースコア)を付けなければならないらしい。  かつ、拡張子は .scss 固定のようです。  すなわち、メディアクエリを記述した被インポートファイル名を

_media.scss
 として、インポートして使用するファイル内で

@import "media";
 と記述することにより、インポートできるそうな。  上記の例では、インポートする側・される側とも同じパスに存在する体で書いておりますが、相対パス・絶対パスを指定して異なるディレクトリのものをインポートすることもできます。  インポートするファイルは、カンマで区切って複数を一度にインポートすることができるそうな・・・。  わたしは見た目の奇麗さから1インポート1行で書くほうが好きです。  2018年7月16日現在、参考サイトには重大な誤りがありまして、インポート文の末尾には ;(セミコロン)が必要です。  セミコロンがないと次の文とつながるので、意図しないエラーになります。