Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウラカタ勉強会 2016年7月度 事例から学ぶ!Sass大解剖
Search
Urakata
July 30, 2016
Technology
0
350
ウラカタ勉強会 2016年7月度 事例から学ぶ!Sass大解剖
Sassの使われた方を、Bootstrap、Foundation 、Bourbon、Compass、WordPressといったメジャーなプロジェクトのソースコードを追いながら調べてみました。
Urakata
July 30, 2016
Tweet
Share
More Decks by Urakata
See All by Urakata
ウラカタ勉強会 2017年2月度 Vagrantによるローカル仮想環境の構築
urakata
2
300
ウラカタ勉強会 2017年1月度 最近のWebから学ぶデザイン術
urakata
0
210
ウラカタ勉強会 2016年11月度 AdminLTEの有料テンプレートが良かった
urakata
0
310
ウラカタ勉強会 2016年11月度 PostCSS
urakata
0
220
ウラカタ勉強会 2016年10月度 カタラウ勉強会
urakata
0
180
ウラカタ勉強会 2016年9月度 静的サイトジェネレータを 利用してみよう!
urakata
0
150
Other Decks in Technology
See All in Technology
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
240
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
15k
モバイル界のMCPを考える
naoto33
0
440
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
160
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
Lazy application authentication with Tailscale
bluehatbrit
0
180
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
360
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.7k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
15k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
250
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
49
5.5k
Producing Creativity
orderedlist
PRO
346
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Typedesign – Prime Four
hannesfritz
42
2.7k
Fireside Chat
paigeccino
37
3.5k
A Tale of Four Properties
chriscoyier
160
23k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Transcript
事例から学ぶ!Sass大解剖 ウラカタ勉強会 2016年7月度 2016年7月28日
自己紹介 エンジニアの加藤大典です。 普段は主にPHPerとしてを開発を行なったり、 制作チームが捗るように、 制作環境の導入お手伝いとかしてます。 来月8/2に Windows10 Anniversary Update がいよいよリリースされます。
Bash on Windows 楽しみ!
自己紹介 デザイナーの中嶋賢です。 SEO系の制作会社・フリーランスを 経由し、2008年に名案企画に入社。 以降、ただひたすらにモクモクと デザイン&マークアップをしています。 3度の飯よりデザインが好き! と言いたいところですが、 サッカーの方が好きというのが本音です。 最近は街中でモンスターも集めてます。
名案企画はSass使い始めてから 2ヶ月が経ちました…
名案企画の現状...
⚫ ネスティング、変数、ミックスインは とりあえず使えるようになった ⚫ ファイル構成どうしよう? ⚫ CSSの設計方針の問題になるが、 継承とミックスインの利用状況を知りたい。 継承ってどこで使われてるの? ⚫
@if, @for, @each, @content などは 使ってない(ためになる実例を見てみたい) ⚫ ビルトイン関数の使いドコロが知りたい。
もっと参考事例が知りたい!
Sassを使用した 有名なプロジェクトの ソースコードを調査 そうだ 調査しよう
探してみました Bootstrap Foundation
Bootstrap ⚫ フロントエンドフレームワークの代表格 ⚫ 現在安定版のv3はLessを使用 ※Sassにポーティングもされている ⚫ 現在開発中のv4はLessからSassに変更 http://v4-alpha.getbootstrap.com/
Foundation ⚫ Bootstrapと同様フロントエンドフレームワークの代表格 ⚫ ウェブサイト以外にHTMLメールやウェブアプリにも使用可能 ⚫ 現在安定番のv6はSassを使用 http://foundation.zurb.com
⚫ 軽量でシンプルなSassのミックスイン集 ⚫ Bootstrapなど特定のフレームワーク依存していないので 既存のプロジェクトなどにも自由に組みこめる ⚫ 派生プロジェクトに Neat, Bitters, Refill
http://bourbon.io/
⚫ Sassの変換機能も付いたCSSフレームワーク ⚫ Sassのミックスイン集もついてる http://bourbon.io/
テーマ: Underscores ⚫ 公式最新テーマ Twentysixteen などを調査したが Sassは使用しておらず ⚫ UnderscoresがSassに対応していた ⚫
別の親テーマなどに依存していない、シンプルなテーマ http://underscores.me/
ソースコードは
v4開発ブランチ https://github.com/twbs/bootstrap/tree/v4-dev SCSSディレクトリ https://github.com/twbs/bootstrap/tree/v4-dev/scss Bootstrap
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
master( 5.0.0-beta.6) https://github.com/thoughtbot/bourbon/tree/master SCSSディレクトリ https://github.com/thoughtbot/bourbon/tree/master/core
v1.0.2 https://github.com/Compass/compass/tree/stable SCSSディレクトリ https://github. com/Compass/compass/tree/stable/core/stylesheets
master(1.0.0) https://github.com/Automattic/_s SCSSディレクトリ https://github.com/Automattic/_s/tree/master/sass テーマ: Underscores
Sass(SCSS) ファイル構成
まずはSassのファイル構成を 確認してみました
Bootstrap SCSSファイル構成 ⚫ mixins/ とutilities/ だけサブディレクトリ化されている。あとはフ ラットなファイル構成 ⚫ 機能やコンポーネント単位でファイルを配置 ⚫
1ファイルに複数のミックスイン、関数を 定義している傾向が強い ⚫ bootstrap.scssで全てをのパーシャルファイルを 読み込んでいる ⚫ 設定ファイルは _variables.scss
Foundation SCSSファイル構成 ⚫ 機能やコンポーネントなどの単位で サブディレクトリ化されている ⚫ 1ファイルに複数のミックスイン、 関数を定義している傾向が強い ⚫ foundation.scss
で全てをのパーシャルファイルを 読み込んでいる ⚫ 設定ファイルは _global.scss
Bourbon SCSSファイル構成 ⚫ library/ にミックスインをフラットに配置、 utilities/ に関数をフラットに配置 ⚫ 1ファイルに1つのミックスイン、 関数を定義している傾向が強い
⚫ _bourbon.scss で全てのパーシャルファイルを 読み込んでいる ⚫ 設定ファイルは settings/_settings.scss ただミックスイン集なので基本それほど設定はない
Compass SCSSファイル構成 ⚫ 機能やコンポーネントなどの単位で サブディレクトリ化されている ⚫ 1ファイルに複数のミックスイン、 関数を定義している傾向が強い ⚫ _compass.scss
で多くのパーシャルファイルを 読み込んでいる(ぜんぶでない) ⚫ 変数設定は各パーシャルファイル毎に分散されている
Sass(SCSS) ファイル構成 まとめ
ファイル構成 ⚫ ディレクトリの掘り方はプロジェクト毎に 完全に好みな感じ。 ⚫ どのプロジェクトも共通なのは、役割や コンポーネント単位などで細かく パーシャルファイル化されていた
初見でもファイル名からすぐ役割が分かっ た!
細かくパーシャルファイル化しよう!
設定ファイル Compass以外は原則、上書きを前提とした変数はひ とつのファイルにまとまっていた。 _variables.sass _global.sass _setting.scss
Bootstrapが分かりやすい
!default フレームワークとしての利用を前提としている Bootstrap, Foundation は !default を使用して、変数 のデフォルト値を変更できるようになっている
!default 変数のデフォルト値を変更する場合は !default で定 義しているよりも前で、変数を設定する bootstrap.scss:
!default _custom.scss:
Sassの構文・関数の使用状況
Sassの構文・関数の使用状況 使用頻度などを見ながら調べてみました ⚫ @extendと@include ⚫ @if ⚫ @content ⚫ @each,
@for, @while ⚫ ビルトイン関数の文字列操作関数
@extendと@include Sassを調べだした際、多くの参考サイトが継承よりも ミックスインを使えばいいんじゃないかみたいなこと が書いてあったので、各プロジェクトでの使用状況を 確認してみました。
Bootstrap ⚫ @extend は5回 ⚫ 圧倒的に@include を使用
Foundation ⚫ @extend は10回 ⚫ 圧倒的に@include を使用
Bourbon ⚫ @extend は使用していない ⚫ include使用行数も少ない
Compass ⚫ @extend は2回 ⚫ 圧倒的に@include を使用
Bootstrap の継承の例 _button-group.scss:
Bootstrap の継承の例 _input-group.scss:
Bootstrap の継承の例 _carousel.scss:
まとめ ⚫ 継承の使用箇所は限定的 ⚫ 同一継承の使用が多い場合、ミックスインにくら べてCSS展開後のファイルサイズが小さいのが一 番のメリット。使えるところではしっかり使いたい。
@if ⚫ @ifは与えられた引数が true か false かで条件分 岐するもの ⚫ プログラムで一般的な制御構文…
⚫ 何か面白い使い方をしていないか?
Bootstrapのシャドウの有効化の例 シャドウを切り替えることができるシンプルなミックスイン
Bootstrapのシャドウの有効化の例 使用箇所は実にすっきり
まとめ ⚫ シャドウや角丸などを有効・無効を切り替えることができるライ ブラリを作る際は、プロパティ単位でミックスインを作ると使用 箇所がすっきり書ける。 ⚫ @if で判別する変数の名前は $enable-* を使ってみてはどう
でしょうか?命名規則には慣習や好みがありますが、決まって ない場合はご参考に。
@content ⚫ ミックスインに渡したブロック{...}を展開することが できるものらしい ⚫ いまいち利用場面が分からない
Bootstrap 使用しているミックスインは2つと少ない?
Foundation _breakpoint.scss とか Bootstrapと同じようなところで 使ってる?
Bourbon 使用箇所はたった1つ!
Compass けっこう使われている
Bootstrapの使用例 mixins/_breakpoints.scss:
メディアクエリに使っている!
簡単な例 SCSS CSS変換後
Bourbon での使用例
Bourbon での使用例
@contentの使いどころ @media、@font-face などブロックで囲む必要のある ところに使おう!
@for 数値を順に1づつ増やす(減らす)してループさせた い場合に使用する @each 数値以外の文字列のリストやマップデータをループ させたい場合に使用する
Bootstrap
Foundation, Bourbon, Compass 省略…
Bootstrapの例
@While ⚫ 条件がtrueである間ブロックを繰り返す。 ⚫ プログラムではあまりに一般的な制御構文… ⚫ 何か参考になる使い方をしていないか?
@While ⚫ Bootstrap, Foundation, Compassは使っていない ⚫ Bourbonは2行あり
Sassのビルトイン関数 ⚫ RGB関数、HSL関数、透明度関数 ⚫ 数値関数 ⚫ リスト、マップ処理 ⚫ セレクタ関数 ⚫
文字列処理 ⚫ 内省関数 ⚫ その他…
文字列操作系関数が気になった ⚫ 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)
なにか面白い使い方してないかな?
Bootstrap ⚫ 使用していない
Foundation
Bourbon
Compass
to-lower-case, to-upper-case ちなみに全てのプロジェクトで 使われてませんでした
Foundationの例 str-* を1回だけ使ってるのって… なんか気になる(直感) よほど特別なケースがあるのでは?
Foundationの使用例 util/_breakpoint.scss:
Foundationの使用例 Sassで定義したブレイクポイントのサイズを font- familyにセットすることでJavaScriptによみとらせるア イデア! _global.scss:
文字列関数を調べていたら 予想外の収穫あり!
とまぁ、Sassを使ってるプロジェクトのコードを見て きましたが…
ふだんは Bootstrap, Bourbon, Compassなど 使う際はググるか利用例・マニュアルだけ を見てませんか!? たしかにそれで業務の目的は達成できます
コードリーディングしよう! ⚫ 現在はまずGithubでコードが公開されている ⚫ 手元にcloneしてもいいけど、ちょっと読むだけならGithubを ブラウザでみることができる ⚫ 動かして確認することは大事だけど、読むだけでも十分参考 になる ⚫
もっとも実践的な実例がそこにある! ⚫ 全部じゃなくても部分だけ追えばいい
きっとコードリーディングは面白い!
デザイナーの方も! 普段使っているプロジェクトの コードをぜひ読んでみてください!
と、そぉ言われると...
気になるなぁ... 気になるなぁ...
こんなふうに使っている! よく使う要素の Sassを見てみよう!
foundation, bourbonも見たかったんですが、 bootstrapの解析に時間がかかって それ以外できませんでした。 https://github.com/twbs/bootstrap/tree/v4-dev/scss すみません!
Clearfix
• シンプルなmixinの使い方 • アンパサンドで擬似要素も展開している Clearfix
Border radius
• 角丸の利用をmixinでON/OFF一括切り替え • 角丸の値も変数で一元管理 Border radius
Button
• 内側シャドウをmixinでON/OFF切り替え • active,focusの背景色を”darken”で指定してる Button
Grid system
• each,forを使ったcol-*の展開がGood! • これを参考にして自身で構築するのは無理! フレームワークのグリッドを使う方が無難 Grid system
• 効果の少ないmixinなどであれば、フレームワークの書 き方が非常に参考になるし、難しくない! • Grid systemみたいな複雑なものは、参考に自分でとは いかないので、フレームワークを活用することが無難。 まとめ
さて本題… にしてもSassいまさら!?
Sassの登場は… Sass自体は2007年に登場。 国内でも2012、2013年ぐらいから 採用事例が増えており、技術自体はけっこう古い。
正直、いまさら感… 焦りがあります…
…ありました。
Adobe もこれから! Dreamweaver の Sass対応
現在のDreamweaver ⚫ Sass には完全対応していない (エディタでファイルを開くことは可能 ⚫ Sass の変換は Compass, Node.js
などの パッケージを利用する必要がある
今後のDreamweaver ⚫ Sassの変換まで対応! ⚫ Compass, Bourbon, Neat, Bitters などの ミックスインが標準で利用可能。
https://blogs.adobe.com/creativestation/web- dreamweaver-sass-compile-and-options
Bootsrapも v4からSass対応!
あ き ら め な い で…
Sassこれからです! Sassを始めることはまだまだ遅くない! これからもっとSass普及するはず! 皆でもっと使っていきましょう!
Sassこれからです! Sassを始めることはまだまだ遅くない! これからもっとSass普及するはず! 皆でもっと使っていきましょう! д゚)チラッ
ありがとうございました