Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

https://twitter.com/bc_rikko

ダーシノ

October 10, 2019
Tweet

More Decks by ダーシノ

Other Decks in Technology

Transcript

  1. 注意事項 Sassにはいくつかバージョンがある Dart Sass Dartで実装されていて、新機能が先行実装されている @use や @forward が実装されているのはコレ LibSass

    C++で実装されていて、node‑sassとかで使われている こだわりなくSass書いてる人はたぶんLibSass使ってる Ruby Sass R.I.P. これから話す内容は Dart Sass 1.23.0以降 でしか使えません!  (2019年10月時点)
  2. @import vs @use # @import @use スコープ グローバル ファイル単位 名前空間

    なし ファイル名 (変更可能) プライベート変数 なし あり !default の変数 グローバルに定義 読み込むときに上書き可 CSSの重複 する しない
  3. @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
  4. @use のスコープ // variables/̲colors.scss // private (prefixに ̲ or ‑

    をつけるとprivateになる) $_blue: #3D7FF1; $‑blue: #3D7FF1; // public $primary: $_blue !default; // style.scss @use 'variables/colors'; a { // <namespace>.<variable|function|mixin> のように参照する color: colors. $primary; } a.blue { // ERROR: $̲blueはprivateなのでアクセスできない color: colors.$_blue; }
  5. @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; }
  6. !default の上書き // variables/̲colors.scss $_blue: #3D7FF1; $primary: $_blue !default; //

    !defaultを上書き @use 'variables/colors' with ( $primary: #0229FF; ); a { // color: #0229FF; color: colors. $primary; }
  7. @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'); }
  8. 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;