ウラカタ勉強会 2016年7月度 事例から学ぶ！Sass大解剖

Sassの使われた方を、Bootstrap、Foundation 、Bourbon、Compass、WordPressといったメジャーなプロジェクトのソースコードを追いながら調べてみました。

Transcript

1. 事例から学ぶ！Sass大解剖 ウラカタ勉強会 2016年7月度 2016年7月28日
2. 自己紹介 エンジニアの加藤大典です。 普段は主にPHPerとしてを開発を行なったり、 制作チームが捗るように、 制作環境の導入お手伝いとかしてます。 来月8/2に Windows10 Anniversary Update がいよいよリリースされます。 Bash on Windows 楽しみ！
3. 自己紹介 デザイナーの中嶋賢です。 SEO系の制作会社・フリーランスを 経由し、2008年に名案企画に入社。 以降、ただひたすらにモクモクと デザイン&マークアップをしています。 3度の飯よりデザインが好き！ と言いたいところですが、 サッカーの方が好きというのが本音です。 最近は街中でモンスターも集めてます。
4. 名案企画はSass使い始めてから 2ヶ月が経ちました…
5. 名案企画の現状...
6. ⚫ ネスティング、変数、ミックスインは とりあえず使えるようになった ⚫ ファイル構成どうしよう？ ⚫ CSSの設計方針の問題になるが、 継承とミックスインの利用状況を知りたい。 継承ってどこで使われてるの？ ⚫ @if, @for, @each, @content などは 使ってない（ためになる実例を見てみたい） ⚫ ビルトイン関数の使いドコロが知りたい。
7. もっと参考事例が知りたい！
8. Sassを使用した 有名なプロジェクトの ソースコードを調査 そうだ 調査しよう
9. 探してみました Bootstrap Foundation
10. Bootstrap ⚫ フロントエンドフレームワークの代表格 ⚫ 現在安定版のv3はLessを使用 ※Sassにポーティングもされている ⚫ 現在開発中のv4はLessからSassに変更 http://v4-alpha.getbootstrap.com/
11. Foundation ⚫ Bootstrapと同様フロントエンドフレームワークの代表格 ⚫ ウェブサイト以外にHTMLメールやウェブアプリにも使用可能 ⚫ 現在安定番のv6はSassを使用 http://foundation.zurb.com
12. ⚫ 軽量でシンプルなSassのミックスイン集 ⚫ Bootstrapなど特定のフレームワーク依存していないので 既存のプロジェクトなどにも自由に組みこめる ⚫ 派生プロジェクトに Neat, Bitters, Refill http://bourbon.io/
13. ⚫ Sassの変換機能も付いたCSSフレームワーク ⚫ Sassのミックスイン集もついてる http://bourbon.io/
14. テーマ: Underscores ⚫ 公式最新テーマ Twentysixteen などを調査したが Sassは使用しておらず ⚫ UnderscoresがSassに対応していた ⚫ 別の親テーマなどに依存していない、シンプルなテーマ http://underscores.me/
15. ソースコードは
16. v4開発ブランチ https://github.com/twbs/bootstrap/tree/v4-dev SCSSディレクトリ https://github.com/twbs/bootstrap/tree/v4-dev/scss Bootstrap
17. v6.2.3 https://github.com/zurb/foundation-sites/tree/v6.2.3/ SCSSディレクトリ https://github.com/zurb/foundation-sites/tree/v6.2.3/scss Foundation
18. master( 5.0.0-beta.6) https://github.com/thoughtbot/bourbon/tree/master SCSSディレクトリ https://github.com/thoughtbot/bourbon/tree/master/core
19. v1.0.2 https://github.com/Compass/compass/tree/stable SCSSディレクトリ https://github. com/Compass/compass/tree/stable/core/stylesheets
20. master(1.0.0) https://github.com/Automattic/_s SCSSディレクトリ https://github.com/Automattic/_s/tree/master/sass テーマ: Underscores
21. Sass(SCSS) ファイル構成
22. まずはSassのファイル構成を 確認してみました
23. Bootstrap SCSSファイル構成 ⚫ mixins/ とutilities/ だけサブディレクトリ化されている。あとはフ ラットなファイル構成 ⚫ 機能やコンポーネント単位でファイルを配置 ⚫ 1ファイルに複数のミックスイン、関数を 定義している傾向が強い ⚫ bootstrap.scssで全てをのパーシャルファイルを 読み込んでいる ⚫ 設定ファイルは _variables.scss
24. Foundation SCSSファイル構成 ⚫ 機能やコンポーネントなどの単位で サブディレクトリ化されている ⚫ 1ファイルに複数のミックスイン、 関数を定義している傾向が強い ⚫ foundation.scss で全てをのパーシャルファイルを 読み込んでいる ⚫ 設定ファイルは _global.scss
25. Bourbon SCSSファイル構成 ⚫ library/ にミックスインをフラットに配置、 utilities/ に関数をフラットに配置 ⚫ 1ファイルに1つのミックスイン、 関数を定義している傾向が強い ⚫ _bourbon.scss で全てのパーシャルファイルを 読み込んでいる ⚫ 設定ファイルは settings/_settings.scss ただミックスイン集なので基本それほど設定はない
26. Compass SCSSファイル構成 ⚫ 機能やコンポーネントなどの単位で サブディレクトリ化されている ⚫ 1ファイルに複数のミックスイン、 関数を定義している傾向が強い ⚫ _compass.scss で多くのパーシャルファイルを 読み込んでいる（ぜんぶでない） ⚫ 変数設定は各パーシャルファイル毎に分散されている
27. Sass(SCSS) ファイル構成 まとめ
28. ファイル構成 ⚫ ディレクトリの掘り方はプロジェクト毎に 完全に好みな感じ。 ⚫ どのプロジェクトも共通なのは、役割や コンポーネント単位などで細かく パーシャルファイル化されていた
29. 初見でもファイル名からすぐ役割が分かっ た！
30. 細かくパーシャルファイル化しよう！
31. 設定ファイル Compass以外は原則、上書きを前提とした変数はひ とつのファイルにまとまっていた。 _variables.sass _global.sass _setting.scss
32. Bootstrapが分かりやすい
33. !default フレームワークとしての利用を前提としている Bootstrap, Foundation は !default を使用して、変数 のデフォルト値を変更できるようになっている
34. !default 変数のデフォルト値を変更する場合は !default で定 義しているよりも前で、変数を設定する bootstrap.scss:
35. !default _custom.scss:
36. Sassの構文・関数の使用状況
37. Sassの構文・関数の使用状況 使用頻度などを見ながら調べてみました ⚫ @extendと@include ⚫ @if ⚫ @content ⚫ @each, @for, @while ⚫ ビルトイン関数の文字列操作関数
38. @extendと@include Sassを調べだした際、多くの参考サイトが継承よりも ミックスインを使えばいいんじゃないかみたいなこと が書いてあったので、各プロジェクトでの使用状況を 確認してみました。
39. Bootstrap ⚫ @extend は5回 ⚫ 圧倒的に@include を使用
40. Foundation ⚫ @extend は10回 ⚫ 圧倒的に@include を使用
41. Bourbon ⚫ @extend は使用していない ⚫ include使用行数も少ない
42. Compass ⚫ @extend は2回 ⚫ 圧倒的に@include を使用
43. Bootstrap の継承の例 _button-group.scss:
44. Bootstrap の継承の例 _input-group.scss:
45. Bootstrap の継承の例 _carousel.scss:
46. まとめ ⚫ 継承の使用箇所は限定的 ⚫ 同一継承の使用が多い場合、ミックスインにくら べてCSS展開後のファイルサイズが小さいのが一 番のメリット。使えるところではしっかり使いたい。
47. @if ⚫ @ifは与えられた引数が true か false かで条件分 岐するもの ⚫ プログラムで一般的な制御構文… ⚫ 何か面白い使い方をしていないか？
48. Bootstrapのシャドウの有効化の例 シャドウを切り替えることができるシンプルなミックスイン
49. Bootstrapのシャドウの有効化の例 使用箇所は実にすっきり
50. まとめ ⚫ シャドウや角丸などを有効・無効を切り替えることができるライ ブラリを作る際は、プロパティ単位でミックスインを作ると使用 箇所がすっきり書ける。 ⚫ @if で判別する変数の名前は $enable-* を使ってみてはどう でしょうか？命名規則には慣習や好みがありますが、決まって ない場合はご参考に。
51. @content ⚫ ミックスインに渡したブロック{...}を展開することが できるものらしい ⚫ いまいち利用場面が分からない
52. Bootstrap 使用しているミックスインは2つと少ない？
53. Foundation _breakpoint.scss とか Bootstrapと同じようなところで 使ってる？
54. Bourbon 使用箇所はたった1つ！
55. Compass けっこう使われている
56. Bootstrapの使用例 mixins/_breakpoints.scss:
57. メディアクエリに使っている！
58. 簡単な例 SCSS CSS変換後
59. Bourbon での使用例
60. Bourbon での使用例
61. @contentの使いどころ @media、@font-face などブロックで囲む必要のある ところに使おう！
62. @for 数値を順に1づつ増やす（減らす）してループさせた い場合に使用する @each 数値以外の文字列のリストやマップデータをループ させたい場合に使用する
63. Bootstrap
64. Foundation, Bourbon, Compass 省略…
65. Bootstrapの例
66. @While ⚫ 条件がtrueである間ブロックを繰り返す。 ⚫ プログラムではあまりに一般的な制御構文… ⚫ 何か参考になる使い方をしていないか？
67. @While ⚫ Bootstrap, Foundation, Compassは使っていない ⚫ Bourbonは2行あり
68. Sassのビルトイン関数 ⚫ RGB関数、HSL関数、透明度関数 ⚫ 数値関数 ⚫ リスト、マップ処理 ⚫ セレクタ関数 ⚫ 文字列処理 ⚫ 内省関数 ⚫ その他…
69. 文字列操作系関数が気になった ⚫ unquote($string) ⚫ quote($string) ⚫ str-length($string) ⚫ str-insert($string, $insert, $index) ⚫ str-index($string, $substring) ⚫ str-slice($string, $start-at, [$end-at]) ⚫ to-upper-case($string) ⚫ to-lower-case($string)
70. なにか面白い使い方してないかな？
71. Bootstrap ⚫ 使用していない
72. Foundation
73. Bourbon
74. Compass
75. to-lower-case, to-upper-case ちなみに全てのプロジェクトで 使われてませんでした
76. Foundationの例 str-* を1回だけ使ってるのって… なんか気になる（直感） よほど特別なケースがあるのでは？
77. Foundationの使用例 util/_breakpoint.scss:
78. Foundationの使用例 Sassで定義したブレイクポイントのサイズを font- familyにセットすることでJavaScriptによみとらせるア イデア！ _global.scss:
79. 文字列関数を調べていたら 予想外の収穫あり！
80. とまぁ、Sassを使ってるプロジェクトのコードを見て きましたが…
81. ふだんは Bootstrap, Bourbon, Compassなど 使う際はググるか利用例・マニュアルだけ を見てませんか！？ たしかにそれで業務の目的は達成できます
82. コードリーディングしよう！ ⚫ 現在はまずGithubでコードが公開されている ⚫ 手元にcloneしてもいいけど、ちょっと読むだけならGithubを ブラウザでみることができる ⚫ 動かして確認することは大事だけど、読むだけでも十分参考 になる ⚫ もっとも実践的な実例がそこにある！ ⚫ 全部じゃなくても部分だけ追えばいい
83. きっとコードリーディングは面白い！
84. デザイナーの方も！ 普段使っているプロジェクトの コードをぜひ読んでみてください！
85. と、そぉ言われると...
86. 気になるなぁ... 気になるなぁ...
87. こんなふうに使っている! よく使う要素の Sassを見てみよう!
88. foundation, bourbonも見たかったんですが、 bootstrapの解析に時間がかかって それ以外できませんでした。 https://github.com/twbs/bootstrap/tree/v4-dev/scss すみません！
89. Clearfix
90. • シンプルなmixinの使い方 • アンパサンドで擬似要素も展開している Clearfix
91. Border radius
92. • 角丸の利用をmixinでON/OFF一括切り替え • 角丸の値も変数で一元管理 Border radius
93. Button
94. • 内側シャドウをmixinでON/OFF切り替え • active,focusの背景色を”darken”で指定してる Button
95. Grid system
96. • each,forを使ったcol-*の展開がGood! • これを参考にして自身で構築するのは無理！ フレームワークのグリッドを使う方が無難 Grid system
97. • 効果の少ないmixinなどであれば、フレームワークの書 き方が非常に参考になるし、難しくない！ • Grid systemみたいな複雑なものは、参考に自分でとは いかないので、フレームワークを活用することが無難。 まとめ
98. さて本題… にしてもSassいまさら！？
99. Sassの登場は… Sass自体は2007年に登場。 国内でも2012、2013年ぐらいから 採用事例が増えており、技術自体はけっこう古い。
100. 正直、いまさら感… 焦りがあります…
101. …ありました。
102. Adobe もこれから！ Dreamweaver の Sass対応
103. 現在のDreamweaver ⚫ Sass には完全対応していない （エディタでファイルを開くことは可能 ⚫ Sass の変換は Compass, Node.js などの パッケージを利用する必要がある
104. 今後のDreamweaver ⚫ Sassの変換まで対応！ ⚫ Compass, Bourbon, Neat, Bitters などの ミックスインが標準で利用可能。 https://blogs.adobe.com/creativestation/web- dreamweaver-sass-compile-and-options
105. Bootsrapも v4からSass対応！
106. あ き ら め な い で…
107. Sassこれからです! Sassを始めることはまだまだ遅くない！ これからもっとSass普及するはず！ 皆でもっと使っていきましょう！
108. Sassこれからです! Sassを始めることはまだまだ遅くない！ これからもっとSass普及するはず！ 皆でもっと使っていきましょう！ дﾟ)ﾁﾗｯ
109. ありがとうございました