Submit Search
Upload
Gumi study#15 Sass構造化
•
7 likes
•
2,877 views
Haraguchi Go
Follow
2013年7月22日(月) gumi study#15 Sass構造化の事例
Read less
Read more
Technology
Report
Share
Report
Share
1 of 69
Download now
Download to read offline
Recommended
Shibuya.XSS Technical Talk #5 「このオブジェクトは ここ.」 デザインテンプレートはここ(宣伝):http://sagittarius.dip.jp/toshi/template.php
ブラウザとWebサーバとXSSの話@Shibuya.xss
ブラウザとWebサーバとXSSの話@Shibuya.xss
Toshiharu Sugiyama
カーネル/VM探検隊@沖縄でやったアレです。詳しくは一番最後の参考資料を見てください。
今日からはじめるCSP(Kernel/VM@Okinawa)
今日からはじめるCSP(Kernel/VM@Okinawa)
cocoa_dahlia
This slide is for study by NIT
0511 lt
0511 lt
kataware
SaCSS vol.78 発表資料
Node.jsでスクレイピングして可視化してみた
Node.jsでスクレイピングして可視化してみた
Yasunori Kirimoto
XSSの概要と対策をざっくりまとめてみた。 社内勉強会用資料。
今さら聞けないXSS
今さら聞けないXSS
Sota Sugiura
WordPressの運用初心者に向けて、WordPressを運用する上で抑えておきたいポイントやおすすめプラグインなどを紹介します。
WordPress初心者のためのサイト運営虎の巻
WordPress初心者のためのサイト運営虎の巻
Hidekazu Ishikawa
日本MSP協会主催 オペレーションカンファレンス 2015 Spring 担当LT 「僕が私が考えるMSP」
私が考える泥くさいMsp
私が考える泥くさいMsp
Kazumi Hirose
MicrosoftのWebブラウザ、Internet Explorer/EdgeにはXSS攻撃からユーザーを保護するためのXSSフィルターという機能が搭載されている。XSSフィルターは、リクエストにXSS攻撃らしき文字列があり、ページ内にそれに対応する文字列が出力されている場合に、ページ内の対応する文字列の一部を書き換えることによりユーザーを保護する。この書き換え動作は安全に行われているのだろうか?答えはNoだ。今回私は、XSS脆弱性のないありふれたページで、XSSフィルターの動作を利用することで、保護するどころかXSS脆弱性を作り出すことができる手法を発見した。本講演では、XSSフィルターを利用したXSS攻撃の可能性について技術的な詳細を述べるとともに、サイト管理者はこのXSSフィルターの悪夢とどう向き合うべきかについて提案する。
XSSフィルターを利用したXSS攻撃 by Masato Kinugawa
XSSフィルターを利用したXSS攻撃 by Masato Kinugawa
CODE BLUE
Recommended
Shibuya.XSS Technical Talk #5 「このオブジェクトは ここ.」 デザインテンプレートはここ(宣伝):http://sagittarius.dip.jp/toshi/template.php
ブラウザとWebサーバとXSSの話@Shibuya.xss
ブラウザとWebサーバとXSSの話@Shibuya.xss
Toshiharu Sugiyama
カーネル/VM探検隊@沖縄でやったアレです。詳しくは一番最後の参考資料を見てください。
今日からはじめるCSP(Kernel/VM@Okinawa)
今日からはじめるCSP(Kernel/VM@Okinawa)
cocoa_dahlia
This slide is for study by NIT
0511 lt
0511 lt
kataware
SaCSS vol.78 発表資料
Node.jsでスクレイピングして可視化してみた
Node.jsでスクレイピングして可視化してみた
Yasunori Kirimoto
XSSの概要と対策をざっくりまとめてみた。 社内勉強会用資料。
今さら聞けないXSS
今さら聞けないXSS
Sota Sugiura
WordPressの運用初心者に向けて、WordPressを運用する上で抑えておきたいポイントやおすすめプラグインなどを紹介します。
WordPress初心者のためのサイト運営虎の巻
WordPress初心者のためのサイト運営虎の巻
Hidekazu Ishikawa
日本MSP協会主催 オペレーションカンファレンス 2015 Spring 担当LT 「僕が私が考えるMSP」
私が考える泥くさいMsp
私が考える泥くさいMsp
Kazumi Hirose
MicrosoftのWebブラウザ、Internet Explorer/EdgeにはXSS攻撃からユーザーを保護するためのXSSフィルターという機能が搭載されている。XSSフィルターは、リクエストにXSS攻撃らしき文字列があり、ページ内にそれに対応する文字列が出力されている場合に、ページ内の対応する文字列の一部を書き換えることによりユーザーを保護する。この書き換え動作は安全に行われているのだろうか?答えはNoだ。今回私は、XSS脆弱性のないありふれたページで、XSSフィルターの動作を利用することで、保護するどころかXSS脆弱性を作り出すことができる手法を発見した。本講演では、XSSフィルターを利用したXSS攻撃の可能性について技術的な詳細を述べるとともに、サイト管理者はこのXSSフィルターの悪夢とどう向き合うべきかについて提案する。
XSSフィルターを利用したXSS攻撃 by Masato Kinugawa
XSSフィルターを利用したXSS攻撃 by Masato Kinugawa
CODE BLUE
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
11/18イベント登壇資料です。
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
「9th Knock!」 第9回Knock! Knock! 勉強会(2012年10月12日、B-nest静岡市産学交流センターにて) http://knock3.hamnaly.com/vol09/
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次: 1. Sassとは/機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは/機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================
Sass/Compass講習会
Sass/Compass講習会
Beeworks
社内勉強会向けに作成した資料(内容一部修正版) ベタ書きCSSで非効率な管理をしていて、単純な修正でも整理されていないCSSをメンテナンスすることは容易ではなく、CSS修正作業工数が問題として挙がっている。 その問題の解決策の一つとして、CSS拡張メタ言語のSassの導入を推進するためチーム内のSassを知らないメンバ向けにSassとは何かを簡単に説明した内容です。
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
DIST.1 「Sass」 発表資料
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
Sass の超入門者向けのスライドです。
Sass 超入門
Sass 超入門
Michinari Odajima
ng-mtg#6 AngularJS勉強会の発表資料です。
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Muneaki Nishimura
DIST.2「Sass Again」発表資料
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
2013年1月5日(土)CSS Nite in SAPPORO, Vol.8 with 札幌IT飲み会 「新春ライトニングトーク大会」で話した内容です。
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
Sass less
Sass less
Net Kanayan
本来JavaScriptにコンパイルなどのビルドは必須ではありませんが、 いまどきのJavaScriptアプリではビルドが重要です。 代謝の激しいフロントエンドを反映し、JSビルドの世界も盛り上がっています。 このチャートはビルドの現状を追うことでJSの現状をとらえることを目的にしています。
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
sass typescript gulp
Front end develop environment
Front end develop environment
Ryuto Yasugi
第16回 岡山Ruby, Ruby on Rails勉強会での発表資料
Sassでちょっと楽しよう
Sassでちょっと楽しよう
Makoto Henmi
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
Css3講座
Css3講座
SeiyaH
2016.10.05 日本電子出版協会 講演映像 https://www.youtube.com/watch?v=LcpDFrBx6nw
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
Japan Electronic Publishing Association
Syed Talal Wasim, Muzammal Naseer, Salman Khan, Ming-Hsuan Yang, Fahad Shahbaz Khan , "Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Grounding" arXiv2024 https://arxiv.org/abs/2401.00901v2
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
This is an introduction to MAPPO's paper.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
More Related Content
Similar to Gumi study#15 Sass構造化
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
優也 田島
11/18イベント登壇資料です。
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
「9th Knock!」 第9回Knock! Knock! 勉強会(2012年10月12日、B-nest静岡市産学交流センターにて) http://knock3.hamnaly.com/vol09/
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次: 1. Sassとは/機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは/機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================
Sass/Compass講習会
Sass/Compass講習会
Beeworks
社内勉強会向けに作成した資料(内容一部修正版) ベタ書きCSSで非効率な管理をしていて、単純な修正でも整理されていないCSSをメンテナンスすることは容易ではなく、CSS修正作業工数が問題として挙がっている。 その問題の解決策の一つとして、CSS拡張メタ言語のSassの導入を推進するためチーム内のSassを知らないメンバ向けにSassとは何かを簡単に説明した内容です。
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
DIST.1 「Sass」 発表資料
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
Sass の超入門者向けのスライドです。
Sass 超入門
Sass 超入門
Michinari Odajima
ng-mtg#6 AngularJS勉強会の発表資料です。
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Muneaki Nishimura
DIST.2「Sass Again」発表資料
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
2013年1月5日(土)CSS Nite in SAPPORO, Vol.8 with 札幌IT飲み会 「新春ライトニングトーク大会」で話した内容です。
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
Sass less
Sass less
Net Kanayan
本来JavaScriptにコンパイルなどのビルドは必須ではありませんが、 いまどきのJavaScriptアプリではビルドが重要です。 代謝の激しいフロントエンドを反映し、JSビルドの世界も盛り上がっています。 このチャートはビルドの現状を追うことでJSの現状をとらえることを目的にしています。
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
CSS設計に関わるあれこれ。 基本〜実践的な内容です。 OOCSS, BEM, SMACSSとかも出てきます。
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
sass typescript gulp
Front end develop environment
Front end develop environment
Ryuto Yasugi
第16回 岡山Ruby, Ruby on Rails勉強会での発表資料
Sassでちょっと楽しよう
Sassでちょっと楽しよう
Makoto Henmi
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
Css3講座
Css3講座
SeiyaH
2016.10.05 日本電子出版協会 講演映像 https://www.youtube.com/watch?v=LcpDFrBx6nw
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
Japan Electronic Publishing Association
Similar to Gumi study#15 Sass構造化
(20)
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Sassの基本機能のみで効率的なWordPressのcssコーディングtipsをご紹介
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Sass/Compass講習会
Sass/Compass講習会
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
Sassをはじめよう!
Sassをはじめよう!
Sass 超入門
Sass 超入門
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Sass実践編+Compass入門
Sass実践編+Compass入門
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Sass less
Sass less
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Front end develop environment
Front end develop environment
Sassでちょっと楽しよう
Sassでちょっと楽しよう
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Css3講座
Css3講座
CSSシークレットはどのような書籍か【映像あり】
CSSシークレットはどのような書籍か【映像あり】
Recently uploaded
Syed Talal Wasim, Muzammal Naseer, Salman Khan, Ming-Hsuan Yang, Fahad Shahbaz Khan , "Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Grounding" arXiv2024 https://arxiv.org/abs/2401.00901v2
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
This is an introduction to MAPPO's paper.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
2024年5月8日 Power Platform 勉強会 #1 LT資料
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20Lカタログ
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Jue Wang, Wentao Zhu, Pichao Wang, Xiang Yu, Linda Liu, Mohamed Omar, Raffay Hamid, " Selective Structured State-Spaces for Long-Form Video Understanding" CVPR2023 https://openaccess.thecvf.com/content/CVPR2023/html/Wang_Selective_Structured_State-Spaces_for_Long-Form_Video_Understanding_CVPR_2023_paper.html
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Key topics covered: - Understanding Ballerina's role in integrations: features and advantages - Designing and implementing REST APIs for integration - Designing and implementing GraphQL services with Ballerina - Monitoring and observing applications - Introduction to data integration
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(10)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Gumi study#15 Sass構造化
1.
ソシャゲでCSS
Sassを構造化 gumi study #15
2.
自己紹介 原口 剛 (はらぐち
ごう) 株式会社gumi所属 UIエンジニア Ghrgc
3.
ドラゴンジェネシス 2013年4月26日リリース!! 「剣と魔法」に彩られた 大作王道ファンタジーRPG URL: http://pf.gree.jp/3393
4.
今回のモチベーション 大所帯(最大70人ぐらい)での開発 すごく貴重な経験させてもらった 安心・安全な フロントエンド開発手法を共有
5.
Sassの設計で扱う内容 1.構造化する理由 2.構造化へのアプローチ 3.スタイル適応範囲の限定 4.SCSSファイルの結合 5.問題点 6.まとめ
6.
Sass.とは 拡張子は「.sass」と「.scss」 の二種類 「.scss」 はcssと文法が似ている(SCSS記法) コンパイルを通してCSSへ出力 本件の環境は、Sass
3.2.9 本家(http://sass-lang.com/)
7.
Sassの設計で扱う内容 1.構造化する理由 2.構造化へのアプローチ 3.スタイル適応範囲の限定 4.SCSSファイルの結合 5.問題点 6.まとめ
8.
ドラジェネ開発案件 全220ページほど・・・ 全ページにおいて一点物のカンプ 単純にコピペで済む話ではない 四ヶ月ぐらいかかると思ったorz
9.
チームでフロントエンド コミットの数が激増 スタイル定義の大量生産 使いどころがちょっとわからないスタイル どこから混入したかわからないスタイル
10.
なんか大変そう・・・・・
11.
これまでの実装実績、、、
12.
いちフロントエンジニアの 裁量で実装
13.
ファイルの分割方針も曖昧
14.
既存のスタイルが どこで使われているのか不明
15.
他人のコードは・・・ 多分こんな感じに見える・・・
16.
17.
18.
そんなコードに 関わりたくない
19.
もうメンテ無理・・・・・
20.
となる前に、、
21.
構造化しましょう!
22.
Sassの設計で扱う内容 1.構造化する理由 2.構造化へのアプローチ 3.スタイル適応範囲の限定 4.SCSSファイルの結合 5.問題点 6.まとめ
23.
構造化とは 全体を把握した上でその構成要素について明らかに なっている 構成要素間の関係が分かりやすく整理されている
24.
やってみた
25.
用途別に SCSSファイルをわける
26.
ActionScript 3.0 パッケージ構造を参考
27.
ディレクトリ名 役割 controls 単体で形成される部品 scenes
ページ固有 share scenes内ファイル間で共有 stage 描画領域どこでも animations アニメーション constants 変数 utills 汎用化されたスタイル わけました
28.
ページ単位でもっと細分化
29.
ページ単位でもっと細分化 HTMLの階層構造に沿う
30.
やっちゃえ
31.
HTMLはサブディレクトリで階層化されている サブディレクトリの数だけSCSSファイルをscenes/に 用意する SCSSファイルの名前はHTMLサブディレクトリ名と 同じ プロジェクト環境に合わせる
32.
card/ scenes/ root/ gacha/ HTML Sass 同名 同名 同名 card.scss root.scss gacha.scss
33.
Sassの設計で扱う内容 1.構造化する理由 2.構造化へのアプローチ 3.スタイル適応範囲の限定 4.SCSSファイルの結合 5.問題点 6.まとめ
34.
scenes/のSCSSファイル どのHTMLのスタイルか明確にしておく仕組み 定義したスタイルのスコープを限定する SCSSファイル固有のidを親要素にしたネスト構造の 中にスタイルを記述
35.
ネスト セレクタの親子関係を入れ子で表現できる 親セレクタの指定が一度で済む
36.
SCSS記法のネスト
37.
こうなる
38.
ネスト内のスタイルは ネスト外への干渉をしない
39.
限定的なスタイル定義 scenes/_root.scss
40.
限定的なスタイル定義 scenes/_root.scss 出力されるCSSは親セレクタに必ず#rootが含まれる
41.
idの命名規則 HTML側はルート要素に サブディレクトリ名のidを付与しておく scenes/*.scssは必ず親要素をidでネスト する
42.
HTMLルート要素のid属性 手書きは正直めんどくさい 命名規則を守ってもらえるか不安
43.
サーバーサイドでページのルート要素にid属性を付与 する 自動付与
44.
サーバーサイドでページのルート要素にid属性を付与 する 自動付与
45.
Sassの設計で扱う内容 1.構造化する理由 2.構造化へのアプローチ 3.スタイル適応範囲の限定 4.SCSSファイルの結合 5.問題点 6.まとめ
46.
CSSを結合 分けただけでは部分的なCSSがたくさん コンパイル出力されるだけです scssscssscss csscsscss コンパイル
47.
SCSSを結合しましょう!
48.
SCSSを結合しましょう! @import
49.
@import CSSの@importはCSSから別のCSSをロード Sass独自の@import 構造化したSCSSファイルを共有 別ファイルの@mixinや@extend、変数が使用可能にな る
50.
@importの実践 結合するので結合前のSCSSからのCSSは不要 結合結果のCSSだけあればよい CSS出力しないSCSSファイル(パーシャル) パーシャルはファイル名が_(アンダースコア) からはじまる
51.
target.scss _target_1.scss _target_2.scss target.css target_1.css target_2.css compile CSS出力されない
52.
結合専用のSCSSファイル 構造化した結果、200個以上のSCSSファイル @importを管理簡素化と一元化 各サブディレクトリ内のSCSSファイルを すべて結合する__init__.scssを用意する
53.
__init__.scss scenes/ _sub_1.scss _sub_10.scss ∼ @import production.scss@import
54.
production.scss
55.
結果 •テンプレートサブディレクトリ scene/*.scss ルート要素のid属性は必ず関連してい ることになる •構成要素の関係が明らかになった •scene/*.scssに書かれたスタイル
56.
チームでフロントエンド テンプレートディレクトリ単位でのスタイルを担当 担当分のscenes/*.scssをコミット scenes/での実装のブレは、影響範囲が狭いので寛容
57.
チームでフロントエンド テンプレートディレクトリ単位でのスタイルを担当 担当分のscenes/*.scssをコミット scenes/での実装のブレは、影響範囲が狭いので寛容 →コンフリクトが少い
58.
チームでフロントエンド テンプレートディレクトリ単位でのスタイルを担当 担当分のscenes/*.scssをコミット scenes/での実装のブレは、影響範囲が狭いので寛容 →コンフリクトが少い →スタイルをぶち込め!!!
59.
Sassの設計で扱う内容 1.構造化する理由 2.構造化へのアプローチ 3.スタイル適応範囲の限定 4.SCSSファイルの結合 5.問題点 6.まとめ
60.
コンパイルが遅い @extendの使用箇所の増加 CSS Spriteの自動生成の増加
61.
どちらも必要な機能 @extendは、セレクタをグルーピングして スタイル定義を共有する仕組みでは強力な機能では あるが使用箇所が増えるとコンパイルに時間がかかる css spriteを自動生成すれば、UI素材を1つにまとめら れることによって画面が描画されるまでの時間の短 縮に繋がる
62.
スプライト自動生成 キャッシュなしの初期コンパイルに7分以上
63.
遅!!!!
64.
developmentモード $ compass compile
-e development コンパイルターゲットを切り替えて CSS Spriteを自 動生成をしない ミニファイしない config.rb
65.
productionモード $ compass compile
-e production コンパイルターゲットを切り替えて CSS Spriteを自動生成をする ミニファイルする config.rb
66.
Sassの設計で扱う内容 1.構造化する理由 2.構造化へのアプローチ 3.スタイル適応範囲の限定 4.SCSSファイルの結合 5.問題点 6.まとめ
67.
大規模開発できた! Sassの構造を保ちつつ フロント側10人で並行して大量の画面を作成可能 4ヶ月→1ヶ月半でフロント実装を完成させた 構造化しているので複雑な問題であっても 規則性のある管理が出来ている
68.
大規模開発できた! Sassの構造を保ちつつ フロント側10人で並行して大量の画面を作成可能 4ヶ月→1ヶ月半でフロント実装を完成させた 構造化しているので複雑な問題であっても 規則性のある管理が出来ている 継続的なリファクタが可能
69.
ご清聴ありがとうございました
Download now