2014/03/29 WordBench東京 春のデザイナー祭り！のスライド

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でできなかったことができるようになる！
・ネスト！(入れ子)
・変数！
・四則演算！(+-*/)
・関数！
・要素の継承！(Mixin,extend)
・制御構文！(ループやif文)
・and more...
PHPみたいな
ことができるね

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. Screw-Axis｜[css] @importを使うべきでない理由
ひとつずつCSSを
DLしちゃう

37. パーシャル
@importするのはCSSと同じだが、
最終的に一つのCSSにコンパイルする。
@import "module;
@import "mixin";
@import "form";
@import "reset";

38. パーシャル
@importするのはCSSと同じだが、
最終的に一つのCSSにコンパイルする。
compile!!
style.css

39. パーシャル
@importするのはCSSと同じだが、
最終的に一つのCSSにコンパイルする。
compile!!
style.css
style.css
ひとつでオケ

40. ループ

41. @for $i from 1 through 10 {
.mb-#{$i*10} {
margin-bottom: #{$i*10}px;
}
}
@for
for文で繰り返し

42. @for $i from 1 through 10 {
.mb-#{$i*10} {
margin-bottom: #{$i*10}px;
}
}
@for
for文で繰り返し
ループは他にも
@whileや@eachも
あるんだ

43. .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; }
@for
コンパイルすると...

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
の教科書