WordPressでCSSプリプロセッサ入門

2014/03/29 WordBench東京 春のデザイナー祭り！のスライドです。
https://wbtokyo.doorkeeper.jp/events/9652

Transcript

1. WordPressで CSSプリプロセッサ入門 WordBench Tokyo 2014.03.29
2. 自己紹介
3. Sou-Lab. 森田 壮 @sou̲lab フリーランス デザインとかコーディングとか ディレクションとか Web制作者のための Sassの教科書 Web制作者のための SublimeTextの教科書
5. Ustもやるよ
6. CSSプリプロセッサってなに？
7. CSS Preprocessor CSSメタ言語とも呼ばれる。 CSSを拡張して色々と機能を増やしたもの。 ほかにも色々。数多く存在している。
8. CSS Preprocessor CSSメタ言語とも呼ばれる。 CSSを拡張して色々と機能を増やしたもの。 SassもLessもStylus もできることは だいたい同じ ほかにも色々。数多く存在している。
9. CSS Preprocessor CSSでできなかったことができるようになる！ ・ネスト！(入れ子) ・変数！ ・四則演算！(+-*/) ・関数！ ・要素の継承！(Mixin,extend) ・制御構文！(ループやif文) ・and more...
10. CSS Preprocessor CSSでできなかったことができるようになる！ ・ネスト！(入れ子) ・変数！ PHPみたいな ・四則演算！(+-*/) ことができるね ・関数！ ・要素の継承！(Mixin,extend) ・制御構文！(ループやif文) ・and more...
11. コンパイル？
12. CSS Preprocessor しかし、そのままではブラウザで動かないので、 CSSにコンパイル(ビルド)する必要がある。 compile!! ※Lessはjsを読み込むことでそのままでも動く
13. コンパイル(ビルド) コンパイルは黒い画面でもGUIコンパイラでもできる。
14. 今回はこれ使います
15. SassとCodeKit 今回はSass(SCSS)とGUIアプリのCodeKitを使います。 ＋
16. なんでSass？
17. WordPressでよく言われている
18. 巨人の肩に乗れ
19. なんでSass？ わたしはこうしてSassを選びました。 ・国内のユーザーが多い ・高機能 ・Compassなどの機能拡張 ・Bootstrap,Foundationなどの フレームワーク ・本も出てる
20. なんでSass？ わたしはこうしてSassを選びました。 ・国内のユーザーが多い ・高機能 ・Compassなどの機能拡張 ・Bootstrap,Foundationなどの フレームワーク ・本も出てる
21. なんでSass？ わたしはこうしてSassを選びました。 ・国内のユーザーが多い ・高機能 ・Compassなどの機能拡張 ・Bootstrap,Foundationなどの フレームワーク ・本も出てる
22. なんでCodeKit？
23. なんでCodeKit？ 今回はCodeKitを選びました。 ・楽だから ・高機能 ・更新頻度が高い 機能的には黒い画面が最強。 でもMac専用 $29
24. ブラウザで すぐ試せる Sass Meister http://sassmeister.com/
26. WordPressに 便利なSassの機能
27. Sassの基本機能紹介
28. デモ
29. ・ネスト！ ・変数！ ・四則演算！ ・関数！ ・要素の継承！
30. ・ネスト！ ・変数！ ・四則演算！ 便利っしょ？ ・関数！ ・要素の継承！
31. 一行コメント
32. 一行コメント .site-header { background-color: #000; //max-width: 1260px; position: relative; width: 100%; z-index: 4; } .header-main { min-height: 48px; //padding: 0 10px; } 地味に便利
33. パーシャル
34. とあるテーマファイル /* Theme Name: Hoge Theme Theme URI: http://hoge.com/ Author: hogeyama */ ダメよ〜 ! @import url('common.css'); @import url('module.css'); @import url('style.css'); @import url('print.css'); ダメダメ
36. ひとつずつCSSを DLしちゃう Screw-Axis｜[css] @importを使うべきでない理由
37. パーシャル @importするのはCSSと同じだが、 最終的に一つのCSSにコンパイルする。 @import "module; @import "mixin"; @import "form"; @import "reset";
38. パーシャル @importするのはCSSと同じだが、 最終的に一つのCSSにコンパイルする。 compile!! style.css
39. パーシャル @importするのはCSSと同じだが、 最終的に一つのCSSにコンパイルする。 style.css compile!! ひとつでオケ style.css
40. ループ
41. @for for文で繰り返し @for $i from 1 through 10 { .mb-#{$i*10} { margin-bottom: #{$i*10}px; } }
42. @for for文で繰り返し @for $i from 1 through 10 { ループは他にも .mb-#{$i*10} { @whileや@eachも margin-bottom: #{$i*10}px; あるんだ } }
43. @for コンパイルすると... .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; }
44. セマンティックさ が無くなるけど、 必要なときもあるよね
45. Jetpack
46. Jetpack WordPressでコンパイルができる 「カスタムCSS」 を有効化する
47. Jetpack 外観 ＞ CSS編集
48. Jetpack データベースに動的にCSSが生成される
49. Jetpack データベースに動的にCSSが生成される ちょっとした スタイルを適用 するときに使えるね
50. WP-SCSSってのもある
52. 便利そう！！ ※試してない
53. まとめ
54. WordPressとか関係なく
55. 使ったほうがいいよ！
56. 使ったほうがいいよ！ いいよ！！
57. ありがとうございました @sou̲lab Web制作者のための Sassの教科書 Web制作者のための Sublime Text の教科書