@use

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

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

@useルールは、他のSassスタイルシートからミックスイン、関数、および変数をロードし、複数のスタイルシートからのCSSを結合します。 @useによってロードされたスタイルシートは「モジュール」と呼ばれます。 Sassは、便利な関数が満載の組み込みモジュールも提供しています。

最も単純な@useルールは@use "<url>"と記述され、指定されたURLにあるモジュールをロードします。この方法でロードされたスタイルは、スタイルがロードされる回数に関係なく、コンパイルされたCSS出力に1回だけ含まれます。

⚠️ 注意！

スタイルシートの@useルールは、スタイルルールを含む@forward以外のルールよりも前に記述する必要があります。ただし、モジュールの構成時に使用するために、@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
@use 'foundation/code';
@use '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
@use 'foundation/code'
@use 'foundation/lists'
CSS出力code {
  padding: .25em;
  line-height: 0;
}

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

メンバーのロードメンバーのロードパーマリンク

別のモジュールから変数、関数、ミックスインにアクセスするには、<名前空間>.<変数>、<名前空間>.<関数>()、または@include <名前空間>.<ミックスイン>()と記述します。デフォルトでは、名前空間はモジュールのURLの最後のコンポーネントになります。

@useでロードされたメンバー（変数、関数、ミックスイン）は、それらをロードするスタイルシート内でのみ表示されます。他のスタイルシートでそれらにアクセスしたい場合は、独自の@useルールを記述する必要があります。これにより、各メンバーがどこから来ているかを正確に把握するのが容易になります。一度に多数のファイルからメンバーをロードしたい場合は、@forwardルールを使用して、それらをすべて1つの共有ファイルから転送できます。

💡 豆知識

@useはメンバー名に名前空間を追加するため、スタイルシートを作成するときに$radiusや$widthのような非常に単純な名前を選択しても安全です。これは、他のライブラリとの競合を避けるために、ユーザーが$mat-corner-radiusのような長い名前を書くことを推奨していた古い@importルールとは異なり、スタイルシートを明確で読みやすくするのに役立ちます。

  SCSS

  Sass

  CSS
SCSS構文// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}
Sass構文// src/_corners.sass
$radius: 3px

@mixin rounded
  border-radius: $radius

// style.sass
@use "src/corners"

.button
  @include corners.rounded
  padding: 5px + corners.$radius

CSS出力.button {
  border-radius: 3px;
  padding: 8px;
}

名前空間の選択名前空間の選択パーマリンク

デフォルトでは、モジュールの名前空間は、ファイル拡張子を除いたURLの最後のコンポーネントになります。ただし、頻繁に参照するモジュールに短い名前を使用したり、同じファイル名で複数のモジュールをロードしたりするなど、別の名前空間を選択したい場合があります。これを行うには、@use "<url>" as <名前空間>と記述します。

  SCSS

  Sass

  CSS
SCSS構文// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}
Sass構文// src/_corners.sass
$radius: 3px

@mixin rounded
  border-radius: $radius

// style.sass
@use "src/corners" as c

.button
  @include c.rounded
  padding: 5px + c.$radius

CSS出力.button {
  border-radius: 3px;
  padding: 8px;
}

@use "<url>" as *と記述して、名前空間なしでモジュールをロードすることもできます。ただし、これを行うのは自分で作成したスタイルシートのみにすることをお勧めします。それ以外の場合は、名前の競合を引き起こす可能性のある新しいメンバーが導入される可能性があります。

  SCSS

  Sass

  CSS
SCSS構文// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners" as *;

.button {
  @include rounded;
  padding: 5px + $radius;
}
Sass構文// src/_corners.sass
$radius: 3px

@mixin rounded
  border-radius: $radius

// style.sass
@use "src/corners" as *

.button
  @include rounded
  padding: 5px + $radius

CSS出力.button {
  border-radius: 3px;
  padding: 8px;
}

プライベートメンバープライベートメンバーパーマリンク

スタイルシートの作成者として、定義したすべてのメンバーをスタイルシートの外で使用可能にしたくない場合があります。Sassでは、名前の先頭に-または_を付けることで、プライベートメンバーを簡単に定義できます。これらのメンバーは、それらを定義するスタイルシート内では通常どおりに機能しますが、モジュールのパブリックAPIの一部にはなりません。つまり、モジュールをロードするスタイルシートからは表示されません。

💡 豆知識

単一のモジュールだけでなく、パッケージ全体に対してメンバーをプライベートにしたい場合は、パッケージのエントリポイント（パッケージを使用するためにユーザーにロードを指示するスタイルシート）からそのモジュールを転送しないでください。また、モジュールの残りを転送しながら、そのメンバーを非表示にすることもできます。

  SCSS

  Sass
SCSS構文// src/_corners.scss
$-radius: 3px;

@mixin rounded {
  border-radius: $-radius;
}
// style.scss
@use "src/corners";

.button {
  @include corners.rounded;

  // This is an error! $-radius isn't visible outside of `_corners.scss`.
  padding: 5px + corners.$-radius;
}
Sass構文// src/_corners.sass
$-radius: 3px

@mixin rounded
  border-radius: $-radius

// style.sass
@use "src/corners"

.button
  @include corners.rounded

  // This is an error! $-radius isn't visible outside of `_corners.scss`.
  padding: 5px + corners.$-radius

構成構成パーマリンク

スタイルシートでは、構成可能にするために!defaultフラグ付きの変数を定義できます。構成でモジュールをロードするには、@use <url> with (<変数>: <値>, <変数>: <値>)と記述します。構成された値は、変数のデフォルト値をオーバーライドします。

  SCSS

  Sass

  CSS
SCSS構文// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}
// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);
Sass構文// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
  border-radius: $border-radius
  box-shadow: $box-shadow

// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)



CSS出力code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

ミックスインを使用するミックスインを使用するパーマリンク

@use ... withを使用してモジュールを構成することは非常に便利です。特に、もともと@importルールで動作するように作成されたライブラリを使用する場合はそうです。しかし、特に柔軟ではなく、高度なユースケースにはお勧めしません。多数の変数を一度に構成したり、構成としてマップを渡したり、モジュールをロードした後で構成を更新したりしたい場合は、代わりに変数を設定するためのミックスインと、スタイルを注入するための別のミックスインを作成することを検討してください。

  SCSS

  Sass

  CSS
SCSS構文// _library.scss
$-black: #000;
$-border-radius: 0.25rem;
$-box-shadow: null;

/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow() {
  @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
}

@mixin configure($black: null, $border-radius: null, $box-shadow: null) {
  @if $black {
    $-black: $black !global;
  }
  @if $border-radius {
    $-border-radius: $border-radius !global;
  }
  @if $box-shadow {
    $-box-shadow: $box-shadow !global;
  }
}

@mixin styles {
  code {
    border-radius: $-border-radius;
    box-shadow: -box-shadow();
  }
}
// style.scss
@use 'library';

@include library.configure(
  $black: #222,
  $border-radius: 0.1rem
);

@include library.styles;
Sass構文// _library.sass
$-black: #000
$-border-radius: 0.25rem
$-box-shadow: null

/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow()
  @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15))


@mixin configure($black: null, $border-radius: null, $box-shadow: null)
  @if $black
    $-black: $black !global
  @if $border-radius
    $-border-radius: $border-radius !global
  @if $box-shadow
    $-box-shadow: $box-shadow !global


@mixin styles
  code
    border-radius: $-border-radius
    box-shadow: -box-shadow()





// style.sass
@use 'library'
@include library.configure($black: #222, $border-radius: 0.1rem)
@include library.styles





CSS出力code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

変数の再割り当て変数の再割り当てパーマリンク

モジュールをロードした後、その変数を再割り当てできます。

  SCSS

  Sass
SCSS構文// _library.scss
$color: red;
// _override.scss
@use 'library';
library.$color: blue;
// style.scss
@use 'library';
@use 'override';
@debug library.$color;  //=> blue
Sass構文// _library.sass
$color: red
// _override.sass
@use 'library'
library.$color: blue
// style.sass
@use 'library'
@use 'override'
@debug library.$color  //=> blue

これは、as *を使用して名前空間なしでモジュールをインポートした場合でも機能します。そのモジュールで定義された変数名に割り当てると、そのモジュールの値が上書きされます。

⚠️ 注意！

組み込みモジュールの変数（math.$piなど）は再割り当てできません。

モジュールの検索モジュールの検索パーマリンク

ロードするすべてのスタイルシートに絶対URLを記述するのは面白くないので、Sassのモジュール検索アルゴリズムを使用すると少し簡単になります。まず、ロードするファイルの拡張子を明示的に記述する必要はありません。 @use "variables"と記述すると、variables.scss、variables.sass、またはvariables.cssが自動的にロードされます。

⚠️ 注意！

スタイルシートがすべてのオペレーティングシステムで機能するように、SassはファイルパスではなくURLでファイルをロードします。つまり、Windowsでもバックスラッシュではなくスラッシュを使用する必要があります。

また、URLは大文字と小文字が区別されるため、大文字と小文字を区別しないファイルシステムを使用している場合でも、SassはStyles.scssとstyles.scssを異なるモジュールと見なします。URLがディスク上のファイルの大文字と小文字と一致していることを確認してください。そうしないと、スタイルシートが2回ロードされ、他のオペレーティングシステムでは確実に機能しなくなります。

ロードパスロードパスパーマリンク

すべてのSass実装では、ユーザーがロードパスを指定できます。これは、モジュールを検索するときにSassが検索するファイルシステムのパスです。たとえば、node_modules/susy/sassをロードパスとして渡すと、@use "susy"を使用してnode_modules/susy/sass/susy.scssをロードできます（ただし、pkg: URLの方が適切な処理方法です）。

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

💡 豆知識

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

パーシャルパーシャルパーマリンク

慣例として、モジュールとしてロードされるだけで、単独でコンパイルされないSassファイルは、_で始まります（_code.scssなど）。これらはパーシャルと呼ばれ、Sassツールにこれらのファイルを単独でコンパイルしようとしないように指示します。パーシャルをインポートするときは、_を省略できます。

インデックスファイルインデックスファイルパーマリンク

フォルダ内に_index.scssまたは_index.sassを作成すると、フォルダ自体のURLをロードしたときに、インデックスファイルが自動的にロードされます。

  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
@use 'code';
@use 'lists';
// style.scss
@use '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
@use 'code'
@use 'lists'
// style.sass
@use 'foundation'
CSS出力code {
  padding: .25em;
  line-height: 0;
}

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

`pkg:` URLpkg: URL パーマリンク

Sassは、様々なパッケージマネージャーによって配布されるスタイルシートをロードするために、pkg: URLスキームを使用します。Sassは、異なるパッケージ管理規約を持つ多くの異なるプログラミング言語のコンテキストで使用されるため、pkg: URLにはほとんど意味が設定されていません。代わりに、ユーザーは、ネイティブパッケージマネージャーのロジックを使用してこれらのURLを解決するカスタムインポーターを実装すること（JS APIまたはEmbedded Sassプロトコルを使用）を推奨します。

これにより、pkg: URLとそれを使用するスタイルシートは、異なる言語エコシステム間で移植可能になります。npm（Sassは組み込みのpkg:インポーターを提供）を介してSassライブラリをインストールする場合でも、見つけることができる最もあいまいなパッケージマネージャーを介してインストールする場合でも、@use 'pkg:library'と記述すれば、適切な処理が行われます。

💡 豆知識

pkg: URLは@useだけのものではありません。@forward、meta.load-css()、さらには古い@importルールなど、Sassファイルをロードできる場所ならどこでも使用できます。

`pkg:`インポーターのルールpkg: インポーターのルールパーマリンク

Sassは、すべてのpkg:インポーターが従うべきいくつかの共通ルールを期待しています。これらのルールは、pkg: URLがすべてのパッケージマネージャー間で一貫して処理されることを保証し、スタイルシートが可能な限り移植できるようにするのに役立ちます。

カスタムインポーターの標準ルールに加えて、pkg:インポーターは、非正規のURLのみを処理する必要があります。それは、

スキームがpkgであり、
パスがパッケージ名で始まり、
オプションで、パスセグメントがフォワードスラッシュで区切られたパスが続くものです。

パッケージ名には、特定のパッケージマネージャーがそれをサポートしているかどうかに応じて、フォワードスラッシュを含めることができます。たとえば、npmでは、@namespace/nameのようなパッケージ名が許可されています。英数字以外の文字を含むパッケージ名は、異なるパッケージマネージャー間での移植性が低くなる可能性があることに注意してください。

pkg:インポーターは、次のパターンを拒否する必要があります。

パスが/で始まるURL。
空でない/ヌルのユーザー名、パスワード、ホスト、ポート、クエリ、またはフラグメントを持つURL。

pkg:インポーターが、独自のパッケージマネージャーの規約には違反するが、上記のルールには違反しないURLに遭遇した場合、エラーをスローするのではなく、そのURLのロードを拒否する必要があります。これにより、必要に応じて、ユーザーは複数のpkg:インポーターを同時に使用できます。

Node.jsパッケージインポーターNode.jsパッケージインポーターパーマリンク

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

SassはNode.jsエコシステムとともに最も広く使用されているため、Sassには、Node.jsと同じアルゴリズムを使用してSassスタイルシートをロードするpkg:インポーターが付属しています。これはデフォルトでは利用できませんが、簡単に有効にできます。

JavaScript APIを使用している場合は、new NodePackageImporter()をimportersオプションに追加するだけです。
Dart APIを使用している場合は、NodePackageImporter()をimportersオプションに追加します。
コマンドラインを使用している場合は、--pkg-importer=nodeを渡します。

pkg: URLをロードすると、Node.js pkg:インポーターは、ロードするSassファイルを決定するためにpackage.jsonファイルを参照します。次の順序で確認されます。

"exports"フィールド（条件"sass"、"style"、および"default"を使用）。これは、パッケージがSassのエントリーポイントを公開するための推奨される方法です。
"sass"フィールドまたは"style"フィールド。これはSassファイルへのパスである必要があります。これは、pkg: URLにサブパスがない場合にのみ機能します。pkg:libraryは"sass"フィールドにリストされているファイルをロードしますが、pkg:library/buttonはパッケージのルートからbutton.scssをロードします。
パッケージのルートにあるインデックスファイル。これも、pkg: URLにサブパスがない場合にのみ機能します。

Node.js pkg:インポーターは、"exports"の全機能をサポートしているため、異なるサブパスに対して異なる場所を指定することもできます（キーにはファイル拡張子を含める必要があることに注意してください）。

{
  "exports": {
    ".": {
      "sass": "styles/index.scss",
    },
    "./button.scss": {
      "sass": "styles/button.scss",
    },
    "./accordion.scss": {
      "sass": "styles/accordion.scss",
    }
  }
}

…またはパターンも指定できます。

{
  "exports": {
    ".": {
      "sass": "styles/index.scss",
    },
    "./*.scss": {
      "sass": "styles/*.scss",
    },
  }
}

CSSのロードCSSのロードパーマリンク

.sassファイルと.scssファイルのロードに加えて、Sassは古い.cssファイルもロードできます。

  SCSS

  Sass

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

モジュールとしてロードされたCSSファイルでは、特別なSass機能は許可されないため、Sassの変数、関数、またはmixinを公開することはできません。作成者が誤ってCSSにSassを記述しないようにするために、有効なCSSでもないすべてのSass機能はエラーを生成します。それ以外の場合、CSSはそのままレンダリングされます。さらに、拡張することもできます！

`@import`との違い@importとの違いパーマリンク

@useルールは、古い@importルールを置き換えることを目的としていますが、意図的に異なるように設計されています。以下に、2つの主な違いをいくつか示します。

@useは、変数、関数、およびmixinを現在のファイルのスコープ内でのみ利用可能にします。グローバルスコープに追加することはありません。これにより、Sassファイルが参照する各名前の由来を簡単に把握でき、衝突のリスクなしに短い名前を使用できることを意味します。
@useは、各ファイルを1回だけロードします。これにより、依存関係のCSSを誤って何度も重複して作成してしまうことを防ぎます。
@useは、ファイルの先頭に記述する必要があり、スタイルルール内にネストすることはできません。
各@useルールには、1つの URLしか含めることができません。
@useでは、インデント構文を使用している場合でも、URLを引用符で囲む必要があります。

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

@use

⚠️ 注意！

SCSS構文

Sass構文

CSS出力

メンバーのロードメンバーのロード パーマリンク

💡 豆知識

SCSS構文

Sass構文

CSS出力

名前空間の選択名前空間の選択 パーマリンク

SCSS構文

Sass構文

CSS出力

SCSS構文

Sass構文

CSS出力

プライベートメンバープライベートメンバー パーマリンク

💡 豆知識

SCSS構文

Sass構文

構成構成 パーマリンク

SCSS構文

Sass構文

CSS出力

ミックスインを使用するミックスインを使用する パーマリンク

SCSS構文

Sass構文

CSS出力

変数の再割り当て変数の再割り当て パーマリンク

SCSS構文

Sass構文

⚠️ 注意！

モジュールの検索モジュールの検索 パーマリンク

⚠️ 注意！

ロードパスロードパス パーマリンク

💡 豆知識

パーシャルパーシャル パーマリンク

インデックスファイルインデックスファイル パーマリンク

SCSS構文

Sass構文

CSS出力

pkg: URLpkg: URL パーマリンク

💡 豆知識

pkg:インポーターのルールpkg: インポーターのルール パーマリンク

Node.jsパッケージインポーターNode.jsパッケージインポーター パーマリンク

CSSのロードCSSのロード パーマリンク

SCSS構文

Sass構文

CSS出力

@importとの違い@importとの違い パーマリンク

メンバーのロードメンバーのロードパーマリンク

名前空間の選択名前空間の選択パーマリンク

プライベートメンバープライベートメンバーパーマリンク

構成構成パーマリンク

ミックスインを使用するミックスインを使用するパーマリンク

変数の再割り当て変数の再割り当てパーマリンク

モジュールの検索モジュールの検索パーマリンク

ロードパスロードパスパーマリンク

パーシャルパーシャルパーマリンク

インデックスファイルインデックスファイルパーマリンク

`pkg:` URLpkg: URL パーマリンク

`pkg:`インポーターのルールpkg: インポーターのルールパーマリンク

Node.jsパッケージインポーターNode.jsパッケージインポーターパーマリンク

CSSのロードCSSのロードパーマリンク

`@import`との違い@importとの違いパーマリンク