Sassの新しいモジュールシステム / Introducing New Sass Module System

Sassの新しいモジュールシステム（@use/@forwardの紹介と@importとの比較)を紹介します。

https://twitter.com/bc_rikko

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. @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
   

   View Slide

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

   View Slide

9. @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;
   }
   

   View Slide

10. @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; }
    

    View Slide

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

    View Slide

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

    View Slide

13. @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');
    }
    

    View Slide

14. 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;
    

    View Slide

15. なんか、すごい！
    

    View Slide

16. 参考サイト
    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/
    

    View Slide