- 1. 概要
- 2. インポート
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）」を参考にさせていただきました。
2. インポート
参考サイトによれば、わたしとしてはいささか違和感がありますが、被インポートファイル名には先頭に _（アンダースコア）を付けなければならないらしい。
かつ、拡張子は .scss 固定のようです。
すなわち、メディアクエリを記述した被インポートファイル名を
_media.scss
として、インポートして使用するファイル内で
@import "media";
と記述することにより、インポートできるそうな。
上記の例では、インポートする側・される側とも同じパスに存在する体で書いておりますが、相対パス・絶対パスを指定して異なるディレクトリのものをインポートすることもできます。
インポートするファイルは、カンマで区切って複数を一度にインポートすることができるそうな・・・。
わたしは見た目の奇麗さから１インポート１行で書くほうが好きです。
2018年7月16日現在、参考サイトには重大な誤りがありまして、インポート文の末尾には ;（セミコロン）が必要です。
セミコロンがないと次の文とつながるので、意図しないエラーになります。
|
