34.Sassを小分けにして管理する ～役割でファイルを分ける～
昨日までSassの書き方について学習してきました。
本日はSassのファイル管理面でのお話です。
具体的には
「scss※ファイルを分割して、メインのscssで読み込んで管理してみようよ」
というお話です。
※「scss」というのはSassファイルの拡張子のことです。
では早速やっていきましょう。
Sassのファイル名の特性
全てのSassファイルは最終的にCSSとして書き出して使われますが、一部例外があります。
それはファイル名の先頭にアンダーバー” _ ” をつけた場合です。
どんな形かというと、
_test-style.scss
このようなファイル名です。
先頭にアンダーバーがついていると、CSSとして書き出されないので
書き出して欲しくない場合はこの方法をとります。
書き出さずに別のファイルに読み込んで使う
先程、アンダーバーをつけたファイルは書き出されないということを確認しました。
それはわかった。
では、どんな使い道があるのか？
「メインとなるscssファイルに、各々読み込んで使う」
ということができます。
具体的にどんな時に使うのか
例えば、
- メディアクエリのscssファイル
- スタイルをリセットするscssファイル
こういったCSSをメインのscssの冒頭に書いているとしたらどうでしょう。
めちゃめちゃ長いscssになってしまいますよね。
なので、ファイルとして分割して、あとから読み込む。
こうすることで、ダラダラと書かれていたリセットのスタイルや、
メディアクエリがなくなってスッキリとした状態で
webサイトのスタイル適用に精が出せる。
というわけです。
もう１つの大きなメリット
- メディアクエリのscssファイル
- スタイルをリセットするscssファイル
などは、大体どのサイトを作る場合でも使用しますし、
内容もおおよそ同じですよね。
ということは、
ファイルとして小分けにしておくことで、
別のサイト作成時にそのまま使い回せるということです。
素晴らしい。コードを書く量が減るのは嬉しい。
scssファイルが資産のように感じられますね。
scssファイルの読み込みと使い方
メリットなどについてはここまでの説明でおおよそわかっていただけたかと思います。
今度は実際の読み込みについて見ていきましょう。
今回は各scssファイル名を下記として読み込みを行います。
読み込む側のファイル名 : style.scss
分割したscssファイル名：_media-query.scss
分割したファイルの側では特に記述する必要はありません。
読み込む側のscssファイルには下記のように記述します。
@use "media-query" ;
ここで注意したいのは、読み込む際は「アンダーバー」と「拡張子」をつけない
ということです。
こうすることで、読み込んだ位置に分割したscssファイルの内容が挿入されて
最終的にCSSとして書き出されます。
分割したファイルの変数や@mixinを使う
もちろん分割したファイルの変数や@mixinを使うこともできます。
その使い方は簡単で、読み込む側のファイルで
読み込んだファイル名.mixin名(引数);
と記述すればOKです。
このファイルの中の、この名前のmixinに引数を渡して使うよ
と言っているわけです。
先程の
@use "media-query" ;
こちらに
@mixin mp($breakpoint){
～何かしらの処理～
@content ;
}
のような名前のmixinが設定されていて、
読み込む側で使いたい場合には
@use "media-query" ;
.test-style{
media-query . mp( sp ) ← ファイル名 . mixin名(引数)の形
{
float : none;
}
}
とすることで、使用できます。
今日のまとめ
- Sassはファイルを分割しても最終的には１つのCSSにできる
- 役割ごとなどに分けることで管理や再利用が捗る
- 読み込んだ先でmixin等を使う場合には注意が必要
今日はSassのファイル分割と読み込みについて学習しました。
これも知っておいて損はないと思います。
いろいろと作り込んだら大切な資産にできそうです。
では、また。
