• 2020.07.13
  • Vol.114
  • WEB
  • Vol.114
  • WEB
  • 2020.07.13

Sassの新しいモジュールシステム

Sassに新しいモジュールシステムが導入され、@useと@forwardという2つのルールが登場し、@importルールは、2022年10月にサポートが終了する予定です。現在、Sassの主な実装としてDart SassとLibSassがありますが、まずDart Sassのみ実装されてます。LibSassにも実装される予定です。今回は @use、@forwardのルールを簡単に紹介します。

DEVELOPER

K.K.

Dart Sassとは

Dart Sassとは

Sassと言っても、実装している言語によって3つに分かれています。

  • Ruby Sass … Ruby製。2019年3月にサポートを終了しました。
  • LibSass … C++製。さまざまな言語でSassを扱うためのライブラリです。
  • Dart Sass … Dart製。Ruby Sassにとって代わるSassの標準的な実装(公式推奨)です。

 

今回のモジュールシステムの導入で初めてDart Sassの存在を知った方も多いのではないでしょうか。Dart Sassは高度に最適化されており、動作速度が速く、JavaScriptとの互換性もあります。
Dart SassはSass公式で推奨していることもあって、新機能は順次実装されます。
また、本編で紹介するSassのモジュールとは変数、関数、ミックスインを分類して再利用性を高めたsassのソースファイルのを指しています。

@importから@useへ

新モジュールシステムでは今まで分割したファイル、パーシャルを読み込むときに使っていた@importが廃止予定です。代わりに @use を使うことになりますが、書き方や扱い方が変わってきます。

一方、@useも@importと同様に別のファイルの情報を読み取ります。 スタイルの定義は従来通り、@useを使ったファイルに結合されることになりますが変数や関数、mixin はファイル単位で名前空間を持ちます。

たとえば、プロジェクト全体で利用する変数をまとめた_variables.scssというファイルがあったとします。@importを使用すると、変数はグローバルになり、どのファイルからもアクセスできます。

_base.scss:
@import "variables";
@import "base";
_variables.scss:
$wh: "100%;
_base.scss:
body {
  width: $wh;
}

@useを使用する場合はこれらの変数はグローバルにはならず、読み込んだファイル内でしかアクセスできません。また、デフォルトでファイル名に応じた名前空間を持ち、以下のように〇〇.$variableという形式で参照することになります。

style.scss:
@use "base";
_base.scss:
@use "variables";

body {
  width: variables.$wh;
}

@importでは実際に使われているメンバーがどのsassファイルで宣言されているかを把握するのがとても大変でした。新しいモジュールシステムでは、ファイルごとに参照するモジュールを宣言するため、簡単に把握できると同時に役割ごとにファイルを分けることで、シンプルな変数名やmixin名を使うことができるようになります。

@use名前空間のコントロール

@useを宣言するときにas節を使うと独自の名前空間を持たせることもでき、変数の値を書き換えることが可能になります。

_base.scss:
@use "variables" as v;

body {
  width: v.$wh;
}

@use節変数の上書き

変数を上書きするとき、従来の@importルールでは変数をグローバルに定義する必要がありましたが@useはwith節を用いることで変数を上書きでき、グローバルな名前空間に影響しません。

_variables.scss:
$txt-size: 1rem;
$txt-line-height: 1.3;

@mixin text () {
  font-size: $txt-size;
  line-height: $txt-line-height;
}
_base.scss:
@use "variables" with (
  $base-font-size: 1.125rem,
  $base-line-height: 1.8,
);

h1 {
  @include variables.text();
}

プライベートメンバー

メンバー(変数、関数、Mixins)の先頭に-(ハイフン)や_(アンダースコア)を使用するとプライベートメンバーとなり、宣言されたファイル内でしか利用できません。別ファイルで呼び出してもエラーになります。

_variables.scss:
$_shadow:10px 10px 10px rgba(0,0,0,0.4);
_base.scss:
@use "variables";
button {
  box-shadow: variables.$_shadow; // エラーになります。
}

@forward

@useはロードしたファイルにスコープが生成され、そのファイルでのみ使用することができますが@forwardを使用すると@forwardを宣言している対象ファイルに書かれてる内容を@useで参照することができます。大きなライブラリを作る際に便利かもしれません。

_module.scss:
@forward "variables";
@forward "mixins";
_base.scss:
@use "module";
{
  font-size: module.$base-font-size;
}

まとめ

@importが廃止されるとSassのエコシステムに大きく影響を及ぼすと思います。当面の間は混乱するかと思いますがgulpで新モジュールシステムを試してみても良いかもしれません。

参考URL
Sass公式

TAGS

RECENT POSTS

TRENDING

INDEX

画面を回転してください | 株式会社BOEL

画面を回転してください