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

  • 2,217 views
Uploaded on

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

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

More in: Engineering
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,217
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
10
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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