More Related Content
What's hot (20)
Similar to まだやれる Css preprocesser (20)
まだやれる Css preprocesser
- 1. まだやれる CSS Preprocesser HTML5ビギナーズ 2015-08-27
- 2. 自己紹介 TwitterID: @Sakunyo 代々木のWeb制作会社にてフロントエンド兼マークアップエンジ ニアしています。 主に JavaScript / CSS(SASS) / NodeJS / Git / PHP とか書き ます。 好きなエディタは Vim と PhpStorm
- 5. 旬じゃないのか CSS Preprocesser を 使った Tips の記事みかけませんよね
- 8. なぜか CSS Preprocesser 使ってるのに 業務効率変わらない！！
- 9. CSS Preprocesser あるある ● ファイル構成どうすればいいの...？ ● 自動化だけで満足しちゃった ● ソースコードの中にエベレストが沢山ある... ● 結局便利なCSSだよね ● CSSのガイドラインはあるけど... ● 機能沢山あって覚えられない ● Compass 便利だけどなんか違う
- 10. まだ CSS Preprocesser で消耗してるの？
- 11. CSS の気持ちになって考えて！
- 12. 迷わずファイル分割する ファイルの中身は 5 〜 300行くらいで css │ components │ └ components.scss │ └ components.form.scss └ lib └ require.scss └ mixins.scss
- 13. その機能が必要か考える
- 14. Variable (変数) は使うかどうかを見極める 変数はどんどん増えます 名前の管理も増えるたびに大変になる @color: #FFFFFF; $color: #FFFFFF;
- 15. extend (継承)は使うかどうかを見極める 継承は優先度が複雑になる。大きなCSSほど使い づらい。もはや難読化レベル .foo {} .foo-bar { @extend .foo; ... }
- 17. 迷ったら mixin にする mixin を普段使いする。コンポーネントと思ったら 共通のCSSを書くよりも安全 .foo (@) { … mixin … } #header { .foo; }
- 18. mixin に RWD の Breakpoint を集約 @mixin applyDeviceWidth1280 { @media screen and (max-width: 1280px) { @content; }} .foo { @include applyDeviceWidth1280 { li { … } } }
- 19. mixin に スプライト画像 を集約 @mixin SpritesIconBasic { background: url(/img/sprites/icon_basic.png); background-size: 500px auto; } .foo i { @include SpritesIconBasic; … }
- 20. mixin で名前空間を整理する 1 / 2 mixin は一箇所ですべて定義する // mixins.component.foo.scss @mixin ComponentFoo { … } // mixins.component.bar.scss @mixin ComponentBar { … }
- 21. mixin で名前空間を整理する 2 / 2 mixin を使う時は必ず include してから // pages.home.list.scss .home_list { @include ComponentFoo; } // pages.sitemap.list.scss .sitemap_list { @include ComponentBar; }
- 22. などなど...
- 23. まとめ ● ファイルはこまかく分割し Import ● 変数、継承はルールを決めて利用を制限 ● 迷ったら mixin を使う ● mixin の特性を活かす
- 24. Post CSS？ まだ早い CSS Preprocesser だけで 出来る事は多いハズ...
- 25. ご静聴ありがとうございました