TIPS

2020.07.13
vol.114

WEB

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

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

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

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を使用すると、変数はグローバルになり、どのファイルからもアクセスできます。

style.scss _variables.scss: _base.scss:

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

style.scss: _base.scss:

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

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

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

_base.scss:

@use節変数の上書き

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

_variables.scss: _base.scss:

プライベートメンバー

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

_variables.scss: _base.scss:

@forward

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

_module.scss: _base.scss:

まとめ

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

参考URL
Sass公式
https://sass-lang.com/

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
December (
November (
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。