SCSSで別ファイルを読み込む

CSS SCSS

SCSSで別ファイルを読み込む

SCSSでは、別ファイルを読み込むために @import ディレクティブや @use ディレクティブを使用します。
それぞれの使い方について説明します。

@import ディレクティブ

@import ディレクティブは、別のSCSSファイルを現在のファイルに読み込むために使用します。
ただし、@import は将来的に廃止される予定があるため、新しいプロジェクトでは @use の使用が推奨されています。

例えば、次のようにファイルを分割することができます：

styles.scss

@import 'variables';
@import 'mixins';
@import 'base';

この例では、styles.scss が variables.scss、mixins.scss、base.scss の3つのファイルを読み込んでいます。
これにより、styles.scss でこれらのファイルのスタイルやミックスイン、変数を利用することができます。

@use ディレクティブ

@use ディレクティブは、@import の代わりに使用されることが推奨されている方法です。
@use は、モジュール化と名前空間の管理をより厳密に行うことができ、複数のファイル間でのスタイルの競合を防ぐ助けになります。

例えば、次のようにファイルを分割することができます：

styles.scss

@use 'variables' as *;
@use 'mixins' as mixins;
@use 'base' as base;

variables.scss

$primary-color: #333;

mixins.scss

@mixin border-radius($radius) {
  border-radius: $radius;
}

base.scss

body {
  color: variables.$primary-color;
  @include mixins.border-radius(5px);
}

この例では、styles.scss で variables.scss、mixins.scss、base.scss をそれぞれ @use しています。
variables からは変数をそのまま使用し、mixins からは mixins という名前空間でミックスインを使用し、base からはスタイルを適用しています。

まとめ

  • @import は古い方法であり、将来的に廃止される予定です。
  • @use は新しい方法であり、より強力なモジュール管理が可能です。
  • @use は名前空間を使用して、スタイルの競合を防ぐことができます。

これらの方法を使って、SCSSファイルを効率的に管理し、保守性を向上させることができます。