Sassの新しい モジュールシステム ‑‑‑‑ @use と @forward ‑‑‑‑ フロントエンド交流会 ‑ 2019/10/10 ダーシノ(@bc̲rikko)

自己紹介 ダーシノ(@bc̲rikko) さくらインターネット フロントエンドエンジニア NES.css ファミコン風CSSフレームワーク 世界ランク 4位 ※GitHub css‑framework topicでのスター数

注意事項 Sassにはいくつかバージョンがある Dart Sass Dartで実装されていて、新機能が先行実装されている @use や @forward が実装されているのはコレ LibSass C++で実装されていて、node‑sassとかで使われている こだわりなくSass書いてる人はたぶんLibSass使ってる Ruby Sass R.I.P. これから話す内容は Dart Sass 1.23.0以降 でしか使えません！ 　（2019年10月時点）

Sassに新しいモジュールシステムが やってきた https://github.com/sass/dart‑sass/releases/tag/1.23.0

新しいモジュールシステム @use @import に代わるもの スコープや名前空間などいろいろ使える @forward ファイルをまとめて読み込んで公開できるもの

@import vs @use # @import @use スコープ グローバル ファイル単位 名前空間 なし ファイル名 (変更可能) プライベート変数 なし あり !default の変数 グローバルに定義 読み込むときに上書き可 CSSの重複 する しない

@import の問題点 読み込むとグローバルに展開されどこからでも参照できる 依存モジュールがわかりづらい 変数名や関数名などの命名に工夫が必要 廃止予定 The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. https://sass‑lang.com/documentation/at‑rules/import

@use の特徴 スコープ・名前空間のコントロールができる 依存関係がわかりやすい 汎用的な命名をしても大丈夫 !default の上書きが容易 グローバルに定義しなくてよい

@use のスコープ // variables/̲colors.scss // private (prefixに ̲ or ‑ をつけるとprivateになる) $_blue: #3D7FF1; $‑blue: #3D7FF1; // public $primary: $_blue !default; // style.scss @use 'variables/colors'; a { // . のように参照する color: colors. $primary; } a.blue { // ERROR: $̲blueはprivateなのでアクセスできない color: colors.$_blue; }

@use の名前空間 1. 名前空間 = ファイル名 @use 'colors'; a { color: colors. $primary; } 2. 任意の名前 ( as ) @use 'colors' as c; a { color: c. $primary; } 3. 省略 ( * ) @use 'colors' as *; a { color: $primary; }

!default の上書き // variables/̲colors.scss $_blue: #3D7FF1; $primary: $_blue !default; // !defaultを上書き @use 'variables/colors' with ( $primary: #0229FF; ); a { // color: #0229FF; color: colors. $primary; }

@forward の特徴 複数のモジュールを読み込み、いい感じに整理してエクスポ ートする @use との違い @forward で読み込むとそのモジュールのメンバーを参 照できない エクスポートするメンバーを取捨選択できる

@forward でモジュールをまとめる 1つにまとめて新たなモジュールを作れる // utils/̲index.scss @forward 'variables'; @forward 'functions'; @forward 'mixins'; // style.scss @use 'utils'; a { // mixins を参照 @ include utils.link; // variables を参照 color: utils. $primary; // functions を参照 font‑size: utils.font-size( 'large'); }

show や hide で取捨選択する show や hide で公開/非公開を選べる // utils.scss $size‑large: 30px; $size‑medium: 20px; $size‑small: 10px; @ mixin link( $size) { @ if $size == 'large' { font‑size: $size‑large; } @ else if $size == 'medium' { font‑size: $size‑medium; } @ else { font‑size: $size‑small; } } // $size‑large, $size‑medium, $size‑small は公開しない @forward 'utils' hide $size-*; // @mixin link だけ公開する @forward 'utils' show link;

なんか、すごい！

参考サイト Release Dart Sass 1.23.0 ∙ sass/dart‑sass https://github.com/sass/dart‑sass/releases/tag/1.23.0 Introducing Sass Modules | CSS‑Tricks https://css‑tricks.com/introducing‑sass‑modules/