HTML5ビギナーズ in dots.

1. まだやれる CSS Preprocesser
HTML5ビギナーズ 2015-08-27

2. 自己紹介
TwitterID: @Sakunyo
代々木のWeb制作会社にてフロントエンド兼マークアップエンジ
ニアしています。
主に JavaScript / CSS(SASS) / NodeJS / Git / PHP とか書き
ます。
好きなエディタは Vim と PhpStorm

3. Post CSS 流行ってますね。

4. CSS Preprocesser 入れたのは良いけど
なぜか皆つらそうじゃないですか？

5. 旬じゃないのか CSS Preprocesser を
使った Tips の記事みかけませんよね

6. 導入して問題解決したの？
導入しただけで上手く使われていない？

7. CSS Preprocesser 便利だけど
うまく使えていない...

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;
...
}

16. 共通部品は迷わず mixin 使う

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. ご静聴ありがとうございました