Sass Life

Sassをもっと知りたい人のためのスライド

Transcript

1. Sass のある⽣活 - - Saeka Hirai
2. What is ?
3. Syntactically Awesome Style Sheets 構⽂的に 素敵な スタイル シート
4. 1.Variables 2.Nesting 3.Partials 4.Modules 5.Mixins/functions 6.Extend/Inheritance 7.Operators Syntactically Awesome Features [ のイケてるところ ]
5. SCSS CSS Sass Variables [ 変数 ] OR OR
6. 変数って でも 標準装備なのでは? CSS
7. Map [ 連想配列 ] CSS → → COMPILE COMPILE Sass SCSS
8. は配列や連想配列も 扱うことができる !
9. Nesting [ ⼊れ⼦ ] CSS SCSS Sass = =
10. これだけでも ⼗分便利だけど…
11. & [ 親参照(クラス) ] → → COMPILE COMPILE SCSS Sass CSS
12. & [ 親参照(名前) ] → → COMPILE COMPILE Sass SCSS CSS
13. ⼊れ⼦ + &の合わせ技で コーディングスピード 爆上げ⤴⤴ 
14. Partials [ ファイル分割 ] Sass SCSS OR OR CSS
15. ファイル分割って でも 標準装備なのでは? CSS
16. Partials [ ファイル分割(CSS ) ] → → IMPORT IMPORT style.css variables.css header.css footer.css
17. Partials [ ファイル分割(Sass ) ] _variables.sass _header.sass _footer.sass style.sass → → COMPILE COMPILE → → IMPORT IMPORT style.css ※パーシャルファイル(_[ファイル名].sass )はCSS にコンパイルされません
18. この違いが 意味するものとは？
19. Chrome DevTools Network [ 読み込み速度の⽐較 ] CSS import Sass import & compile 全部読み込み終わるまで34ms 全部読み込み終わるまで28ms の⽅がソースの読み込みが早い！
20. ファイル分割で可読性UP⤴⤴ 変数との組み合わせで メンテナンス性UP⤴⤴
21. パーシャルファイルで ページ表⺬速度UP⤴⤴
22. Modules [ 部品 ] 2019/10 - Dart Sass Ver 1.23.0 - header.scss header.sass _variables.sass _variables.scss header.css → USE → → COMPILE COMPILE
23. @import に 似てる？
24. 2022年10⽉にサポートが終了する予定 Roles [ それぞれの役割 ] @import ・同じファイルを読み込んだ分展開される  ・読み込む変数が全てグローバルになる @use ・同じファイルを何回呼ばれても処理は⼀回 ・名前空間を持たせることができる ・プライベートメンバーが使える (関数等を使⽤するファイルを限定できる) NEW @forward ・他のモジュールを呼びつつ  新しいAPIをエクスポートできる   (ライブラリ製作者は嬉しいらしい) NEW
25. モジュールシステムで 堅牢性UP⤴⤴ 
26. Mixins [ 使いまわせるCSS ] → → COMPILE COMPILE → → IMPORT IMPORT header.css _mixin.sass header.sass @mixin は=に省略可 @import は+に省略可
27. Functions [ 関数 ] → → COMPILE COMPILE → → IMPORT IMPORT header.sass header.css _function.sass
28. 何回も使い回すCSSや 何回も⾏う単位の計算は でまとめてしまおう
29. Extend/Inheritance [ 展開/継承 ] → → COMPILE COMPILE Sass SCSS CSS
30. @mixin の @include に似てる？
31. Roles [ それぞれの役割 ] @include ・使いまわすCSS にいろいろなパターン(引数)を持たせることができる ・@media 内で@include の使⽤ができる @extend ・ピュアなCSS だけを継承させたいときに使う(パターン化はできない) ・@media 内では@extend は使⽤できない 個⼈的には@include の⽅が使い勝⼿がいいです
32. 設計ルールに合わせて 使い回せるものは纏めて 柔軟性UP⤴⤴ 
33. Operators [ 演算⼦ ] Sass SCSS
34. 違う単位同⼠の 計算もしたい？
35. Calc [ 計算式⽤関数 ] CSS ※勿論 ファイルの中でも使えますよ
36. 演算⼦を駆使して 複雑なレイアウトの幅も∞
37. 1.Variables 2.Nesting 3.Partials 4.Modules 5.Mixins/functions 6.Extend/Inheritance 7.Operators Syntactically Awesome Features [ のイケてるところ ]
38. コラム
39.   をコンパイル できる⾔語は ３種類 1.JavaScript → Dart Sass 2.C/C++ → Lib Sass 3.Ruby → Ruby Sass ⚰
40. dart-sass → Dart Sass node-sass → Lib Sass npm [ N ode Package Manager ]
41. Sass とSCSS どっちがいいの？
42. Comparison [ ⽐較 ] SCSS ・CSS と同じ書き⽅({})なので学習コストは安く済む ・CSS と同じ書き⽅({})なのでネストの際にわかりやすい(かもしれない) ・ネストしすぎると{}の数が膨⼤になるので⾒た⽬がカオス ・{}さえあればインデントガタガタでも動いてしまうので  (整形ツール無しだと)ソースが汚くなりやすい ・{}と;は毎回書かないといけないのでコーディングスピードは落ちる ・使⽤案件数は圧倒的Sass よりは多い、記事も多い
43. Comparison [ ⽐較 ] Sass ・rubyの記法に似ている({}の代わりにインデントを使⽤する)ので  学習コストはSCSS よりかかる ・慣れてしまえば爆速コーダーの⼀員です。ようこそ ・ネストしてもインデントなので⾒た⽬がすっきり(詳細度関係ない条件式のお話) ・結構厳しめのルール設定なので治安が保たれる  (インデントおかしいとエラー, セミコロンの後に半⾓スペース必要) ・インデントでHTML を書けるPug との相性は抜群 ✨
44. どちらにも対応できるのが⼀番 あなたが  環境構築担当なら 学習コストのリスクを取ってでも ⻑い⽬で⾒たときに 治安が守られる⽅を選ぶのが賢明な判断
45. CSS から にしたい
46. css2sass で検索
47. 最後に
48. のメイン製作者は Google の⼈です