カノトのアトリエ

カノトのアトリエ > ウェブ開発 > HTML/CSS > 使って覚えるSASS入門 > 【SASS入門】@importを使うメリットとコードを綺麗に保つための設計テクニックを紹介！

【SASS入門】@importを使うメリットとコードを綺麗に保つための設計テクニックを紹介！

【SASS入門】@importを使うメリットとコードを綺麗に保つための設計テクニックを紹介！

今回はSASSで用意されている【@import】を使ってSASSを設計する方法を紹介してます！
@importの使い方やコードを美しく保つための設計テクニックを紹介するので、ぜひ最後までお付き合いください！
なんとなく、SASSを使ってるけど設計に自信がないという方は、SASS設計を考える入口になるかと思います！

それでは行ってみましょう～！

とりあえず記述方法

_text.scss

// テキスト
.text {
  font-size: 16px;
  color: #333;
}

_heading.scss

// 見出し
.heading {
  font-size: 24px;
  color: #663399;
}

style.scss

// コンポーネント
@import "./text";
@import "./heading";

style.css（出力結果）

.text {
  font-size: 16px;
  color: #333;
}
.heading {
  font-size: 24px;
  color: #663399;
}

@importを使うことで、外部のSASSファイルの記述を取り込むことが出来ます。
SASSファイルを複数に分けて管理したい場合に必要になってきますね。

ファイルを複数に分けて管理することで、1つのファイルの記述量が少なくなったり、大量のファイルを1つのファイルに集約することが出来ます。

では、実際に@importを使うことで、どんなメリットがあるのか具体的に紹介していきますね！

コンポーネントごとにファイルを分けて可読性・流用性を上げよう

CSSを設計する際は、コンポーネントごとに管理していくのが一般的だと思います。（Atomicデザイン的な考え方）
そのときに、1コンポーネントにつき1ファイルを心がけると、可読性と流用性が上がります。

例えば、下のようなサイトがあるとします。
まぁこのサイトなんだけどねｗｗ

このページには、以下のような6つのコンポーネントがあります。

  • ヘッダー
  • グロナビ
  • 見出し
  • 記事カード
  • サイドメニュー

これをSASSファイルに置き換えると、こんな感じになります。

  • ヘッダー：_global-header.scss
  • グロナビ：_global-navi.scss
  • 見出し：_heading.scss
  • 記事カード：_article-card.scss
  • 検索窓：_search-form.scss
  • サイドバー：_sidebar.scss

最終的には、これら全てのコンポーネントファイルを1つのファイルにimportしていきます。

コードにするとこんな感じ。

// style.scss
@import 'global-header';
@import 'global-navi';
@import 'heading';
@import 'article-card';
@import 'search-form';
@import 'sidebar';

こんな感じで、SASSファイルを分割するメリットを挙げるとこんな感じになります！

  • 1ファイルごとのコードが短くなり読みやすい
  • クラス名を見れば、どのファイルを修正すればいいのかすぐに分かる

1ファイルごとのコードが短くなり読みやすい

これについては、なんとなく想像できると思います。

仮に、2000行のCSSファイルを全て理解するのは、かなり厳しいですよねｗ
逆に、40行のCSSファイルだったら理解するのはそう難しくはないはずです。

誰かが、2000行のファイルをキチンと管理しているならまだマシかもしれないですが、実際はそんなこともなく・・・。

120行目に「header」の記述があるなと思ったら、1043行目にそれを上書きしている記述がある・・・。
スパゲッティコード末期には、そんなことがよくあります。（よくあった）

SASSでファイル分割することでコードが読みやすくなり、スパゲッティコード末期のような現象は96%減少します！！
※特定ページだけにスタイルを当てることも無くもないので100％ではないですｗ
※自分比

コードが読みやすくなると、コード解読の時間が減ります！
また、内容を理解しやすくなるのでケアレスミスも大きく減ると思います。

  • 数千行のコードを理解するのはムリ
  • ファイルを分けると数十行ずつの理解でOK!!
  • コードが読みやすくなって作業効率と正確性がアップ！

クラス名を見れば、どのファイルを修正すればいいのかすぐに分かる

またもや、2000行のCSSファイルを想像してみましょう。

巨大なファイルから1つの記述を探し出すのは正直、イライラしますよね。
一応、ファイル検索もありますが複数個所を修正するとなると、いちいち検索する必要があるので時間の無駄です。

そんな時にファイル分割されていれば、ファイルを開き、エディタのタブ切り替えで切り替えできるので、かなり楽になります。

また、新しいコンポーネントが追加になった際に、どこに記述すればいいのか迷いますよね・・・。

ファイルの末尾に追加してもいいのですが、そうすると類似しているコンポーネントが離れ離れになり、CSSファイルの見通しが悪くなります。

CSSの見通しが悪くなると、「同じ見た目なのに異なるコンポーネントが出来上がる」という残念な結果になります。

ファイル分割した場合、新しいファイルを1つ用意するだけでOKなので迷うことなく実装に集中できます。

さらに、ファイル名とコンポーネントのCLASS名を同じにすると、とても良いです！
例えばこんな感じ

// _sidebar.scss
.sidebar {
  // スタイル
  &_inner {
    // スタイル
  }

  &.large {
    // スタイル
  }
}

ファイル名が_sidebar.scssなのでCLASS名も.sidebarになってます。

ファイル一覧がCLASS名一覧と同じ意味になるのでCSSの見通しが良くなり、先ほどの残念な結果を避けることが出来ます。

  • 巨大なファイルから修正箇所を探すのはイライラ
  • ファイル分割をするとコードの見通しが良くなる
  • コンポーネントのCLASS名とファイル名を同じにすることで修正箇所を探しやすい！

CSSの記述を1つのファイルに集約するメリット

最後にCSSの記述を1つのファイルに集約するメリットを紹介しますね！

勘の良い方だと、

記述を1ファイルにまとめると不要なスタイルが増えてページの読み込みが遅くなるんじゃね？

と思ったかもしれません。

たしかに、1KBのファイルと1MBのファイルでは1MBの方が遅くなります。

ただ、それと同時に1ファイルと10ファイルの読み込み速度を比較すると10ファイルの方が遅くなります。

ここは割とトレードオフ的なやつですね。

基本的には、ウェブは複数ファイルを読み込む方が時間がかかります。

もちろん、余分な記述が多すぎて1ファイルの容量が大きくなる場合は分けて読み込ませてもOKだと思います。

この辺がトレードオフですね。

  • 基本的にCSSの記述は1つのファイルに集約させると良い
  • ウェブは複数のファイルを読み込ませると読み込み速度が低下する
  • とはいえ、1つのファイルが大きすぎると分けた方が良い場合もある

はい！というわけで、今回は@importを使うメリット設計テクニックを紹介してみました！！

今回紹介した設計方法は@importに注目したので一部分だけになってます。
そのうち、設計方法をまとめた記事も書いていきますね！！

では、最後までありがとうございました！！