新しい* sassモジュールシステム

今日、私たちは誰も他の誰も話していないように見えるというSASSの特徴について話します.の廃止@import 新しいモジュールシステムのルールと実装@use ルール.
私は、最近、SASSドキュメンテーションでこれに遭遇しました:

If you are interested in more content like this, feel free to to my YouTube channel.

モジュールシステムと@ useは何ですか？

2019年10月にモジュールシステムが利用可能になった.モジュールシステムの中心は@use ルール.この規則は、現在のスタイルシートでアクセス可能な別のスタイルシートからCSS、変数、mixn、および関数を作ります.デフォルトでは、変数、ミックス、および関数は、URLのベース名に基づいて名前空間で使用できます.

@use "colors";

.element {
    background-color: colors.$body-bg;
}

名前空間に加えて、いくつかの重要な違いがある@use ○○@import :

@use Countはスタイルシートを実行するだけで、スタイルシートが何回使われるかに関係なく、そのCSS Countを一度含んでいます.

@use 現在のstylesheetで利用可能になります.

名前から始まる- うん_ は、現在のスタイルのスタイルシートに対して@use .

名前空間

名前空間の詳細を見てみましょう、なぜこれは本当に素晴らしい機能です.
そこで、ここでは2つのコンポーネントファイルを持っています.私たちのヒーローコンポーネントとカードコンポーネントの1つ.一般的には、競合を避けるために、変数名を一意に指定する必要があります.しかし、私たちが「偶然」という二つの変数を同じ名前にしたとしましょう.

// _hero-component.scss
$width: 100vw;

// _card-component.scss
$width: 80%;

我々が使うならば@import これらをもたらすには、いくつかの問題に遭遇します.@import は常にインポートされたメンバーを評価します.それで、それがロードする最後であった時から、これは常にカード幅に評価します.

@import 'hero-component';
@import 'card-component';

.hero {
    width: $width; // 80%
}

.card {
    width: $width; // 80%
}

ここがどこです@use 規則がつく.

@use 'hero-component';
@use 'card-component';

.hero {
    width: hero-component.$width; // 100vw
}

.card {
    width: card-component.$width; // 80%
}

だから今我々はもはや私たちの変数の名前を創造する必要があります.

名前空間の制御

さて、名前空間を入力しなければならない仕事が多いと思います.さて、実際にモジュールの名前空間を制御できます.これは明示的にas .

@use 'hero-component' as hero;
@use 'card-component' as card;

.hero {
    width: hero.$width;
}

.card {
    width: card.$width;
}

また、トップレベルの名前空間にモジュールをas * .

@use 'colors' as *;

.element {
    background-color: $bgColor;
}

しかし、我々はこれに注意しなければならなくて、我々がどんな対立も導入しないことを確実としなければなりません.競合が見つかった場合、コンパイラはエラーをスローします.

モジュールの設定

モジュールシステムのもう一つの大きな特徴は、モジュールのデフォルト値を設定する能力です.スタイルシートは!default フラグを設定する.ここではデフォルトを定義するライブラリがあります$border-radius :

// _library.scss
$border-radius: 0.25rem !default;

.card {
    border-radius: $border-radius;
}

このようなデフォルト値を変更できます.

// style.scss
@use 'library' with (
    $border-radius: 0.1rem
);

そして以下の結果が得られます.

.card {
    border-radius: 0.1rem;
}

個人会員

モジュールシステムの前にSASSスタイルシートでプライベートメンバーを持つ方法はありませんでした.今、私たちはそのメンバーを名前を開始することによって定義することができます.これらのメンバーは、それらを定義するスタイルシート内で通常のように動作しますが、モジュールのパブリックAPIの一部ではありません.つまり、モジュールをロードするスタイルシートはそれらを見ることができません!
この例では、private変数を定義します.$-radius . 私たちは@include mixinですが変数を使用できません.コンパイル時にエラーが発生します.

// _corners.scss
$-radius: 3px;

@mixin rounded {
  border-radius: $-radius;
}

// style.scss
@use "corners";

.button {
  @include corners.rounded;

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

今何？

それで、これらの変化は、開発者のために何を意味しますか?前に述べたように、SASSは、既存の@import ベースのコード@use ベース.
幸運にも@ importがsassから取り除かれる前に、若干の時間があります.廃止は2021年10月に設定され、2022年10月にはサポートされます.
しかし、私はあなたが@use そして忘れてしまう@import
つの欠点は、モジュールシステムの現在のコンパイラサポートです.現在はダーツ・スースのみがコンパイルをサポートしています@use ルール.libsassのサポートはまだ利用できません.これに関する最悪の部分はVSコード拡張「生のSASSコンパイラ」がlibsassを使用するということです.したがって、これらの新機能を使用する場合は、その拡張子を溝にし、CLI SASSコンパイラを使用して起動する必要があります.これは非常に使いやすいですが、それは私たちは多くの私たちが使用されているツールを使用することはできません迷惑です.うまくいけば、libsassはすぐに新しい機能で更新されますが、私は見つけることができる現在のetaはありません.

フォローしてサポートします。

私のYouTubeチャンネルを購読してくれたら特別に感謝します:)

🎞️

🐦

🖼️

❤ Patreon

参考文献

@use Documentation

Sass Migration Tool

@import Depreciation Timeline