Gumi study#15 Sass構造化
-
Upload
haraguchi-go -
Category
Technology
-
view
1.702 -
download
2
description
Transcript of Gumi study#15 Sass構造化
![Page 1: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/1.jpg)
ソシャゲでCSS Sassを構造化
gumi study #15
![Page 2: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/2.jpg)
自己紹介原口 剛 (はらぐち ごう)
株式会社gumi所属
UIエンジニア
Ghrgc
![Page 3: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/3.jpg)
ドラゴンジェネシス
2013年4月26日リリース!!「剣と魔法」に彩られた大作王道ファンタジーRPG
URL: http://pf.gree.jp/3393
![Page 4: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/4.jpg)
今回のモチベーション大所帯(最大70人ぐらい)での開発
すごく貴重な経験させてもらった
安心・安全なフロントエンド開発手法を共有
![Page 5: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/5.jpg)
Sassの設計で扱う内容1.構造化する理由
2.構造化へのアプローチ
3.スタイル適応範囲の限定
4.SCSSファイルの結合
5.問題点
6.まとめ
![Page 6: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/6.jpg)
Sass.とは拡張子は「.sass」と「.scss」 の二種類
「.scss」 はcssと文法が似ている(SCSS記法)
コンパイルを通してCSSへ出力
本件の環境は、Sass 3.2.9
本家(http://sass-lang.com/)
![Page 7: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/7.jpg)
Sassの設計で扱う内容1.構造化する理由
2.構造化へのアプローチ
3.スタイル適応範囲の限定
4.SCSSファイルの結合
5.問題点
6.まとめ
![Page 8: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/8.jpg)
ドラジェネ開発案件全220ページほど・・・
全ページにおいて一点物のカンプ
単純にコピペで済む話ではない
四ヶ月ぐらいかかると思ったorz
![Page 9: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/9.jpg)
チームでフロントエンドコミットの数が激増
スタイル定義の大量生産
使いどころがちょっとわからないスタイル
どこから混入したかわからないスタイル
![Page 10: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/10.jpg)
なんか大変そう・・・・・
![Page 11: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/11.jpg)
これまでの実装実績、、、
![Page 12: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/12.jpg)
いちフロントエンジニアの裁量で実装
![Page 13: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/13.jpg)
ファイルの分割方針も曖昧
![Page 14: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/14.jpg)
既存のスタイルがどこで使われているのか不明
![Page 15: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/15.jpg)
他人のコードは・・・多分こんな感じに見える・・・
![Page 16: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/16.jpg)
![Page 17: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/17.jpg)
![Page 18: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/18.jpg)
そんなコードに関わりたくない
![Page 19: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/19.jpg)
もうメンテ無理・・・・・
![Page 20: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/20.jpg)
となる前に、、
![Page 21: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/21.jpg)
構造化しましょう!
![Page 22: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/22.jpg)
Sassの設計で扱う内容1.構造化する理由
2.構造化へのアプローチ
3.スタイル適応範囲の限定
4.SCSSファイルの結合
5.問題点
6.まとめ
![Page 23: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/23.jpg)
構造化とは全体を把握した上でその構成要素について明らかになっている
構成要素間の関係が分かりやすく整理されている
![Page 24: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/24.jpg)
やってみた
![Page 25: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/25.jpg)
用途別にSCSSファイルをわける
![Page 26: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/26.jpg)
ActionScript 3.0 パッケージ構造を参考
![Page 27: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/27.jpg)
ディレクトリ名 役割controls 単体で形成される部品scenes ページ固有share scenes内ファイル間で共有stage 描画領域どこでもanimations アニメーションconstants 変数utills 汎用化されたスタイル
わけました
![Page 28: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/28.jpg)
ページ単位でもっと細分化
![Page 29: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/29.jpg)
ページ単位でもっと細分化
HTMLの階層構造に沿う
![Page 30: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/30.jpg)
やっちゃえ
![Page 31: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/31.jpg)
HTMLはサブディレクトリで階層化されている
サブディレクトリの数だけSCSSファイルをscenes/に用意する
SCSSファイルの名前はHTMLサブディレクトリ名と同じ
プロジェクト環境に合わせる
![Page 32: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/32.jpg)
card/scenes/
root/
gacha/
HTML Sass
同名
同名
同名
card.scss
root.scss
gacha.scss
![Page 33: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/33.jpg)
Sassの設計で扱う内容1.構造化する理由
2.構造化へのアプローチ
3.スタイル適応範囲の限定
4.SCSSファイルの結合
5.問題点
6.まとめ
![Page 34: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/34.jpg)
scenes/のSCSSファイルどのHTMLのスタイルか明確にしておく仕組み
定義したスタイルのスコープを限定する
SCSSファイル固有のidを親要素にしたネスト構造の中にスタイルを記述
![Page 35: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/35.jpg)
ネストセレクタの親子関係を入れ子で表現できる
親セレクタの指定が一度で済む
![Page 36: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/36.jpg)
SCSS記法のネスト
![Page 37: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/37.jpg)
こうなる
![Page 38: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/38.jpg)
ネスト内のスタイルはネスト外への干渉をしない
![Page 39: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/39.jpg)
限定的なスタイル定義
scenes/_root.scss
![Page 40: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/40.jpg)
限定的なスタイル定義
scenes/_root.scss
出力されるCSSは親セレクタに必ず#rootが含まれる
![Page 41: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/41.jpg)
idの命名規則HTML側はルート要素にサブディレクトリ名のidを付与しておく
scenes/*.scssは必ず親要素をidでネストする
![Page 42: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/42.jpg)
HTMLルート要素のid属性手書きは正直めんどくさい
命名規則を守ってもらえるか不安
![Page 43: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/43.jpg)
サーバーサイドでページのルート要素にid属性を付与する
自動付与
![Page 44: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/44.jpg)
サーバーサイドでページのルート要素にid属性を付与する
自動付与
![Page 45: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/45.jpg)
Sassの設計で扱う内容1.構造化する理由
2.構造化へのアプローチ
3.スタイル適応範囲の限定
4.SCSSファイルの結合
5.問題点
6.まとめ
![Page 46: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/46.jpg)
CSSを結合分けただけでは部分的なCSSがたくさんコンパイル出力されるだけです
scssscssscss csscsscss
コンパイル
![Page 47: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/47.jpg)
SCSSを結合しましょう!
![Page 48: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/48.jpg)
SCSSを結合しましょう!@import
![Page 49: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/49.jpg)
@importCSSの@importはCSSから別のCSSをロード
Sass独自の@import
構造化したSCSSファイルを共有
別ファイルの@mixinや@extend、変数が使用可能になる
![Page 50: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/50.jpg)
@importの実践結合するので結合前のSCSSからのCSSは不要
結合結果のCSSだけあればよい
CSS出力しないSCSSファイル(パーシャル)
パーシャルはファイル名が_(アンダースコア)からはじまる
![Page 51: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/51.jpg)
target.scss
_target_1.scss
_target_2.scss
target.css
target_1.css
target_2.css
compile
CSS出力されない
![Page 52: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/52.jpg)
結合専用のSCSSファイル構造化した結果、200個以上のSCSSファイル
@importを管理簡素化と一元化
各サブディレクトリ内のSCSSファイルをすべて結合する__init__.scssを用意する
![Page 53: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/53.jpg)
__init__.scss
scenes/
_sub_1.scss
_sub_10.scss
~@import
production.scss@import
![Page 54: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/54.jpg)
production.scss
![Page 55: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/55.jpg)
結果•テンプレートサブディレクトリscene/*.scssルート要素のid属性は必ず関連していることになる
•構成要素の関係が明らかになった•scene/*.scssに書かれたスタイル
![Page 56: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/56.jpg)
チームでフロントエンドテンプレートディレクトリ単位でのスタイルを担当
担当分のscenes/*.scssをコミット
scenes/での実装のブレは、影響範囲が狭いので寛容
![Page 57: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/57.jpg)
チームでフロントエンドテンプレートディレクトリ単位でのスタイルを担当
担当分のscenes/*.scssをコミット
scenes/での実装のブレは、影響範囲が狭いので寛容
→コンフリクトが少い
![Page 58: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/58.jpg)
チームでフロントエンドテンプレートディレクトリ単位でのスタイルを担当
担当分のscenes/*.scssをコミット
scenes/での実装のブレは、影響範囲が狭いので寛容
→コンフリクトが少い
→スタイルをぶち込め!!!
![Page 59: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/59.jpg)
Sassの設計で扱う内容1.構造化する理由
2.構造化へのアプローチ
3.スタイル適応範囲の限定
4.SCSSファイルの結合
5.問題点
6.まとめ
![Page 60: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/60.jpg)
コンパイルが遅い@extendの使用箇所の増加
CSS Spriteの自動生成の増加
![Page 61: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/61.jpg)
どちらも必要な機能
@extendは、セレクタをグルーピングしてスタイル定義を共有する仕組みでは強力な機能ではあるが使用箇所が増えるとコンパイルに時間がかかる
css spriteを自動生成すれば、UI素材を1つにまとめられることによって画面が描画されるまでの時間の短縮に繋がる
![Page 62: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/62.jpg)
スプライト自動生成キャッシュなしの初期コンパイルに7分以上
![Page 63: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/63.jpg)
遅!!!!
![Page 64: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/64.jpg)
developmentモード$ compass compile -e development
コンパイルターゲットを切り替えて CSS Spriteを自動生成をしない
ミニファイしない
config.rb
![Page 65: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/65.jpg)
productionモード$ compass compile -e production
コンパイルターゲットを切り替えて CSS Spriteを自動生成をする
ミニファイルする
config.rb
![Page 66: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/66.jpg)
Sassの設計で扱う内容1.構造化する理由
2.構造化へのアプローチ
3.スタイル適応範囲の限定
4.SCSSファイルの結合
5.問題点
6.まとめ
![Page 67: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/67.jpg)
大規模開発できた!Sassの構造を保ちつつ
フロント側10人で並行して大量の画面を作成可能
4ヶ月→1ヶ月半でフロント実装を完成させた構造化しているので複雑な問題であっても規則性のある管理が出来ている
![Page 68: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/68.jpg)
大規模開発できた!Sassの構造を保ちつつ
フロント側10人で並行して大量の画面を作成可能
4ヶ月→1ヶ月半でフロント実装を完成させた構造化しているので複雑な問題であっても規則性のある管理が出来ている
継続的なリファクタが可能
![Page 69: Gumi study#15 Sass構造化](https://reader034.fdocuments.net/reader034/viewer/2022042607/5560b286d8b42afe3b8b4723/html5/thumbnails/69.jpg)
ご清聴ありがとうございました