@import

SassはCSSの@importルールを拡張し、SassとCSSスタイルシートのインポートを可能にし、ミックスイン、関数、変数へのアクセスを提供し、複数のスタイルシートのCSSを組み合わせます。ページのレンダリング時にブラウザが複数のHTTPリクエストを行う必要があるプレーンCSSインポートとは異なり、Sassインポートはコンパイル時に完全に処理されます。

SassインポートはCSSインポートと同じ構文ですが、それぞれに独自の@importが必要な場合とは異なり、複数のインポートをコンマで区切ることができます。インデント構文では、インポートされたURLに引用符は必要ありません。

⚠️ 注意！

Sassチームは、@importルールの継続的な使用を推奨していません。Sassは今後数年間で段階的に廃止し、最終的には言語から完全に削除する予定です。@useルールを使用することをお勧めします。（現在、@useをサポートしているのはDart Sassのみです。他の実装を使用しているユーザーは、代わりに@importルールを使用する必要があります。）

`@import`の問題点

@importルールにはいくつかの深刻な問題があります。

@importは、すべての変数、ミックスイン、関数をグローバルにアクセス可能にします。そのため、どこで定義されているかを判断することが非常に困難になります。
すべてがグローバルであるため、ライブラリは名前の衝突を避けるために、すべてのメンバーにプレフィックスを追加する必要があります。
@extendルールもグローバルであるため、どのスタイルルールが拡張されるかを予測することが困難になります。
各スタイルシートは@importされるたびに実行され、そのCSSが出力されるため、コンパイル時間が増加し、出力サイズが大きくなります。
ダウンストリームスタイルシートからアクセスできないプライベートメンバーやプレースホルダーセレクタを定義する方法がありませんでした。

新しいモジュールシステムと@useルールは、これらの問題をすべて解決します。

移行方法

ほとんどの@importベースのコードを@useベースのコードに自動的に変換するマイグレーションツールを作成しました。エントリポイントを指定して実行するだけです！

  SCSS

  Sass

  CSS
SCSS構文// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
// style.scss
@import 'foundation/code', 'foundation/lists';
Sass構文// foundation/_code.sass
code
  padding: .25em
  line-height: 0

// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0



// style.sass
@import foundation/code, foundation/lists
CSS出力code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Sassがファイルをインポートすると、そのファイルは、その内容が@importの場所に直接表示されたかのように評価されます。インポートされたファイルのミックスイン、関数、変数が利用可能になり、そのすべてのCSSは、@importが記述された正確な箇所に含まれます。さらに、@importの前に定義された（他の@importからのものも含む）ミックスイン、関数、または変数は、インポートされたスタイルシートで使用できます。

⚠️ 注意！

同じスタイルシートが複数回インポートされると、毎回再評価されます。関数とミックスインのみを定義する場合、これは通常は問題ありませんが、スタイルルールが含まれている場合、CSSに複数回コンパイルされます。

ファイルの検索ファイルの検索 permalink

インポートするすべてのスタイルシートの絶対URLを書き出すのは面倒なので、Sassのファイルインポートアルゴリズムは少し簡単になっています。まず、インポートするファイルの拡張子を明示的に記述する必要はありません。@import "variables"は、variables.scss、variables.sass、またはvariables.cssを自動的に読み込みます。

⚠️ 注意！

スタイルシートがすべてのオペレーティングシステムで動作することを保証するために、Sassはファイルパスではなく、URLでファイルをインポートします。つまり、Windowsを使用している場合でも、バックスラッシュではなくスラッシュを使用する必要があります。

ロードパスロードパス permalink

すべてのSass実装では、ユーザーがロードパスを提供できます。Sassは、インポートを解決する際にファイルシステム上のパスを検索します。たとえば、node_modules/susy/sassをロードパスとして渡すと、@import "susy"を使用してnode_modules/susy/sass/susy.scssを読み込むことができます。

ただし、インポートは常に最初に現在のファイルに対して相対的に解決されます。相対ファイルが存在しない場合にのみ、ロードパスが使用されます。これにより、新しいライブラリを追加したときに、意図せず相対インポートを混乱させることがなくなります。

💡豆知識

他の言語とは異なり、Sassでは相対インポートに./を使用する必要はありません。相対インポートは常に使用できます。

パーシャルパーシャル permalink

慣例として、単独でコンパイルするのではなく、インポートのみを目的としたSassファイルは、_（_code.scssなど）で始まります。これらはパーシャルと呼ばれ、Sassツールにそれらのファイルを単独でコンパイルしようとさせないようにします。パーシャルをインポートするときは、_を省略できます。

インデックスファイルインデックスファイル permalink

Dart Sass: ✓
LibSass: 3.6.0以降
Ruby Sass: 3.6.0以降

フォルダーに_index.scssまたは_index.sassを作成した場合、フォルダー自体がインポートされると、そのファイルが代わりに読み込まれます。

  SCSS

  Sass

  CSS
SCSS構文// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
// foundation/_index.scss
@import 'code', 'lists';
// style.scss
@import 'foundation';
Sass構文// foundation/_code.sass
code
  padding: .25em
  line-height: 0

// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0



// foundation/_index.sass
@import code, lists
// style.sass
@import foundation
CSS出力code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

カスタムインポーターカスタムインポーター permalink

すべてのSass実装では、カスタムインポーターを定義する方法が提供されており、@importがスタイルシートを見つける方法を制御します。

Node Sassとnpm上のDart Sassは、そのJS APIの一部としてimporterオプションを提供しています。
pub上のDart Sassは、カスタムインポーターによって拡張できる抽象的なImporterクラスを提供します。
Ruby Sassは、カスタムインポーターによって拡張できる抽象的なImporters::Baseクラスを提供します。

ネストネスト permalink

インポートは通常、スタイルシートの最上位レベルに記述されますが、必ずしもそうである必要はありません。スタイルルールまたはプレーンCSSアットルール内にネストすることもできます。インポートされたCSSはそのコンテキストにネストされるため、ネストされたインポートは、特定の要素またはメディアクエリにCSSの一部をスコープするために役立ちます。ネストされたインポートで定義された最上位レベルのミックスイン、関数、変数は、ネストされたコンテキストでのみ使用できます。

  SCSS

  Sass

  CSS
SCSS構文// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}
// style.scss
.theme-sample {
  @import "theme";
}
Sass構文// _theme.sass
pre, code
  font-family: 'Source Code Pro', Helvetica, Arial
  border-radius: 4px

// style.sass
.theme-sample
  @import theme

CSS出力.theme-sample pre, .theme-sample code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

💡豆知識

ネストされたインポートは、サードパーティのスタイルシートのスコープを設定するのに非常に役立ちますが、インポートしているスタイルシートの作者である場合は、通常、スタイルをミックスインに記述し、そのミックスインをネストされたコンテキストに含める方が良いでしょう。ミックスインはより柔軟な方法で使用でき、インポートされたスタイルシートを見ると、どのように使用されるかがより明確になります。

⚠️ 注意！

ネストされたインポート内のCSSはミックスインのように評価されるため、親セレクタは、スタイルシートがネストされているセレクタを参照します。

SCSS

Sass

CSS
SCSS構文// _theme.scss
ul li {
  $padding: 16px;
  padding-left: $padding;
  [dir=rtl] & {
    padding: {
      left: 0;
      right: $padding;
    }
  }
}
// style.scss
.theme-sample {
  @import "theme";
}
Sass構文// _theme.sass
ul li
  $padding: 16px
  padding-left: $padding
  [dir=rtl] &
    padding:
      left: 0
      right: $padding



// style.sass
.theme-sample
  @import theme

CSS出力.theme-sample ul li {
  padding-left: 16px;
}
[dir=rtl] .theme-sample ul li {
  padding-left: 0;
  padding-right: 16px;
}

CSS のインポートCSS のインポートパーマリンク

Dart Sass: 1.11.0以降
LibSass: 部分的
Ruby Sass: ✗

LibSass は .css 拡張子のファイルのインポートをサポートしていますが、仕様とは異なり、それらは CSS ファイルとして解析されるのではなく、SCSS ファイルとして扱われます。この動作は非推奨となっており、下記で説明する動作をサポートするためのアップデートが進行中です。

.sass および .scss ファイルのインポートに加えて、Sass は通常の .css ファイルをインポートできます。唯一のルールは、インポートに .css 拡張子を明示的に含めないことです。これはプレーン CSS の @import を示すために使用されるためです。

  SCSS

  Sass

  CSS
SCSS構文// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.scss
@import 'code';
Sass構文// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.sass
@import code
CSS出力code {
  padding: .25em;
  line-height: 0;
}

Sass によってインポートされた CSS ファイルでは、特別な Sass 機能を使用できません。作成者が誤って CSS に Sass を記述しないようにするために、有効な CSS でないすべての Sass 機能はエラーを生成します。それ以外の場合は、CSS はそのままレンダリングされます。拡張することもできます！

プレーン CSS の `@import`プレーン CSS の @import パーマリンク

Dart Sass: ✓
LibSass: 部分的
Ruby Sass: ✓

デフォルトでは、LibSass はプレーン CSS のインポートを正しく処理します。ただし、カスタムインポーターはプレーン CSS の @import ルールに誤って適用され、それらのルールが Sass ファイルをロードできる可能性があります。

@import は CSS でも定義されているため、Sass はコンパイル時にファイルをインポートしようとすることなく、プレーン CSS の @import をコンパイルする方法が必要です。これを達成し、SCSS を可能な限り CSS のスーパーセットにするために、Sass は次の特性を持つ @import をプレーン CSS のインポートにコンパイルします。

URL が .css で終わるインポート。
URL が http:// または https:// で始まるインポート。
URL が url() として記述されているインポート。
メディアクエリを含むインポート。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

       プレイグラウンドSass構文@import "theme.css"
@import "http://fonts.googleapis.com/css?family=Droid+Sans"
@import url(theme)
@import "landscape" screen and (orientation: landscape)
CSS出力@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

補間補間パーマリンク

Sass のインポートは補間を使用できません（mixin、関数、変数の由来を常に判別できるようにするため）、プレーン CSS のインポートは使用できます。これにより、たとえば mixin パラメーターに基づいて、インポートを動的に生成できます。

  SCSS

  Sass

  CSS

       プレイグラウンドSCSS構文@mixin google-font($family) {
  @import url("http://fonts.googleapis.com/css?family=#{$family}");
}

@include google-font("Droid Sans");

       プレイグラウンドSass構文@mixin google-font($family)
  @import url("http://fonts.googleapis.com/css?family=#{$family}")


@include google-font("Droid Sans")
CSS出力@import url("http://fonts.googleapis.com/css?family=Droid Sans");

インポートとモジュールインポートとモジュールパーマリンク

Dart Sass: 1.23.0以降
LibSass: ✗
Ruby Sass: ✗

現在、Dart Sass のみが @use をサポートしています。他の実装を使用するユーザーは、代わりに @import ルールを使用する必要があります。

Sass のモジュールシステムは、@use ルールを含むファイルをインポートする場合でも、インポートを含むファイルをモジュールとしてロードする場合でも、@import とシームレスに統合されます。@import から @use への移行をできるだけスムーズに行いたいと考えています。

モジュールシステムファイルのインポートモジュールシステムファイルのインポートパーマリンク

@use ルールを含むファイルをインポートする場合、インポートするファイルは、そのファイルに直接定義されているすべてのメンバー（プライベートメンバーを含む）にアクセスできますが、そのファイルがロードしたモジュールのメンバーにはアクセスできません。ただし、そのファイルに @forward ルールが含まれている場合、インポートするファイルは転送されたメンバーにアクセスできます。つまり、モジュールシステムで使用するために記述されたライブラリをインポートできます。

⚠️ 注意！

@use ルールを含むファイルをインポートする場合、それらのルールによって推移的にロードされたすべての CSS は、別のインポートによって既に含まれている場合でも、結果のスタイルシートに含まれます。注意しないと、膨大な CSS 出力につながる可能性があります！

インポート専用のファイルインポート専用のファイルパーマリンク

@use に適した API は、@import には適していない場合があります。たとえば、@use はデフォルトですべてのメンバーに名前空間を追加するため、短い名前を安全に使用できますが、@import はそうではないため、より長い名前が必要になる場合があります。ライブラリの作成者は、ライブラリを新しいモジュールシステムを使用するように更新した場合、既存の @import ベースのユーザーが壊れることを懸念する可能性があります。

これを容易にするために、Sass はインポート専用のファイルもサポートしています。ファイルを <name>.import.scss という名前で作成すると、@use ではロードされず、インポートに対してのみロードされます。これにより、@import ユーザーとの互換性を維持しながら、新しいモジュールシステムのユーザーに優れた API を提供できます。

  SCSS

  Sass
SCSS構文// _reset.scss

// Module system users write `@include reset.list()`.
@mixin list() {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
// _reset.import.scss

// Legacy import users can keep writing `@include reset-list()`.
@forward "reset" as reset-*;
Sass構文// _reset.sass

// Module system users write `@include reset.list()`.
@mixin list()
  ul
    margin: 0
    padding: 0
    list-style: none


// _reset.import.sass

// Legacy import users can keep writing `@include reset-list()`.
@forward "reset" as reset-*

インポートによるモジュールの設定インポートによるモジュールの設定パーマリンク

Dart Sass: 1.24.0以降
LibSass: ✗
Ruby Sass: ✗

モジュールを設定するには、最初にモジュールをロードする @import の前にグローバル変数を定義します。

  SCSS

  Sass

  CSS
SCSS構文// _library.scss
$color: blue !default;

a {
  color: $color;
}
// _library.import.scss
@forward 'library' as lib-*;
// style.sass
$lib-color: green;
@import "library";
Sass構文$color: blue !default

a
  color: $color


// _library.import.sass
@forward 'library' as lib-*
// style.sass
$lib-color: green
@import "library"
CSS出力a {
  color: green;
}

⚠️ 注意！

モジュールは一度だけロードされるため、初めて（間接的にでも）モジュールを @import した後に設定を変更した場合、モジュールを再度 @import しても変更は無視されます。

インポートを含むモジュールのロードインポートを含むモジュールのロードパーマリンク

@use（または @forward）を使用して @import を使用するモジュールをロードする場合、そのモジュールには、ロードするスタイルシートによって定義されたすべての公開メンバーと、そのスタイルシートが推移的にインポートするすべてのものが含まれます。言い換えれば、インポートされたすべてのものは、1 つの大きなスタイルシートに記述されているかのように扱われます。

これにより、依存するすべてのライブラリが新しいモジュールシステムに移行する前に、スタイルシートで @use の使用を開始するのが容易になります。ただし、ライブラリが移行した場合、API が変更される可能性があることに注意してください！

現在のリリース
Dart Sass 1.79.4
LibSass 3.6.6
Ruby Sass ⚰
実装ガイド

@import

⚠️ 注意！

@importの問題点

移行方法

SCSS構文

Sass構文

CSS出力

⚠️ 注意！

ファイルの検索ファイルの検索 permalink

⚠️ 注意！

ロードパスロードパス permalink

💡豆知識

パーシャルパーシャル permalink

インデックスファイルインデックスファイル permalink

SCSS構文

Sass構文

CSS出力

カスタムインポーターカスタムインポーター permalink

ネストネスト permalink

SCSS構文

Sass構文

CSS出力

💡豆知識

⚠️ 注意！

SCSS構文

Sass構文

CSS出力

CSS のインポートCSS のインポート パーマリンク

SCSS構文

Sass構文

CSS出力

プレーン CSS の @importプレーン CSS の @import パーマリンク

SCSS構文

Sass構文

CSS出力

補間補間 パーマリンク

SCSS構文

Sass構文

CSS出力

インポートとモジュールインポートとモジュール パーマリンク

モジュールシステムファイルのインポートモジュールシステムファイルのインポート パーマリンク

⚠️ 注意！

インポート専用のファイルインポート専用のファイル パーマリンク

SCSS構文

Sass構文

インポートによるモジュールの設定インポートによるモジュールの設定 パーマリンク

SCSS構文

Sass構文

CSS出力

⚠️ 注意！

インポートを含むモジュールのロードインポートを含むモジュールのロード パーマリンク

`@import`の問題点

CSS のインポートCSS のインポートパーマリンク

プレーン CSS の `@import`プレーン CSS の @import パーマリンク

補間補間パーマリンク

インポートとモジュールインポートとモジュールパーマリンク

モジュールシステムファイルのインポートモジュールシステムファイルのインポートパーマリンク

インポート専用のファイルインポート専用のファイルパーマリンク

インポートによるモジュールの設定インポートによるモジュールの設定パーマリンク

インポートを含むモジュールのロードインポートを含むモジュールのロードパーマリンク