WordPressで
CSSプリプロセッサ入門
WordBench Tokyo
2014.03.29
自己紹介
Sou-Lab.
森田 壮
@sou_lab
フリーランス
Web制作者のための
Sassの教科書
Web制作者のための
SublimeTextの教科書
デザインとかコーディングとか
ディレクションとか
Ustもやるよ
CSSプリプロセッサってなに?
CSS Preprocessor
CSSメタ言語とも呼ばれる。
CSSを拡張して色々と機能を増やしたもの。
ほかにも色々。数多く存在している。
CSS Preprocessor
CSSメタ言語とも呼ばれる。
CSSを拡張して色々と機能を増やしたもの。
ほかにも色々。数多く存在している。
SassもLessもStylus
もできることは
だいたい同じ
CSS Preprocessor
CSSでできなかったことができるようになる!
・ネスト!(入れ子)
・変数!
・四則演算!(+-*/)
・関数!
・要素の継承!(Mixin,extend)
・制御構文!(ループやif文)
・and more....
CSS Preprocessor
CSSでできなかったことができるようになる!
・ネスト!(入れ子)
・変数!
・四則演算!(+-*/)
・関数!
・要素の継承!(Mixin,extend)
・制御構文!(ループやif文)
・and more....
コンパイル?
CSS Preprocessor
しかし、そのままではブラウザで動かないので、
CSSにコンパイル(ビルド)する必要がある。
compile!!
※Lessはjsを読み込むことでそのままでも動く
コンパイル(ビルド)
コンパイルは黒い画面でもGUIコンパイラでもできる。
今回はこれ使います
SassとCodeKit
今回はSass(SCSS)とGUIアプリのCodeKitを使います。
+
なんでSass?
WordPressでよく言われている
巨人の肩に乗れ
なんでSass?
わたしはこうしてSassを選びました。
・国内のユーザーが多い
・高機能
・Compassなどの機能拡張
・Bootstrap,Foundationなどの
 フレームワーク
・本も出てる
なんでSass?
わたしはこうしてSassを選びました。
・国内のユーザーが多い
・高機能
・Compassなどの機能拡張
・Bootstrap,Foundationなどの
 フレームワーク
・本も出てる
なんでSass?
わたしはこうしてSassを選びました。
・国内のユーザーが多い
・高機能
・Compassなどの機能拡張
・Bootstrap,Foundationなどの
 フレームワーク
・本も出てる
なんでCodeKit?
なんでCodeKit?
今回はCodeKitを選びました。
・楽だから
・高機能
・更新頻度が高い
機能的には黒い画面が最強。
でもMac専用
$29
Sass Meister
http://sassmeister.com/
ブラウザで
すぐ試せる
WordPressに
便利なSassの機能
Sassの基本機能紹介
デモ
・ネスト!
・変数!
・四則演算!
・関数!
・要素の継承!
・ネスト!
・変数!
・四則演算!
・関数!
・要素の継承!
便利っしょ?
一行コメント
.site-header {
background-color: #000;
//max-width: 1260px;
position: relative;
width: 100%;
z-index: 4;
}
.header-main {
...
パーシャル
/*
Theme Name: Hoge Theme
Theme URI: http://hoge.com/
Author: hogeyama
*/
!
@import url('common.css');
@import url('module...
Screw-Axis|[css] @importを使うべきでない理由
ひとつずつCSSを
DLしちゃう
パーシャル
@importするのはCSSと同じだが、
最終的に一つのCSSにコンパイルする。
@import "module;
@import "mixin";
@import "form";
@import "reset";
パーシャル
@importするのはCSSと同じだが、
最終的に一つのCSSにコンパイルする。
compile!!
style.css
パーシャル
@importするのはCSSと同じだが、
最終的に一つのCSSにコンパイルする。
compile!!
style.css
style.css
ひとつでオケ
ループ
@for $i from 1 through 10 {
.mb-#{$i*10} {
margin-bottom: #{$i*10}px;
}
}
@for
for文で繰り返し
@for $i from 1 through 10 {
.mb-#{$i*10} {
margin-bottom: #{$i*10}px;
}
}
@for
for文で繰り返し
ループは他にも
@whileや@eachも
あるんだ
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40...
セマンティックさ
が無くなるけど、
必要なときもあるよね
Jetpack
Jetpack
WordPressでコンパイルができる
「カスタムCSS」

を有効化する
Jetpack
外観 > CSS編集
Jetpack
データベースに動的にCSSが生成される
Jetpack
データベースに動的にCSSが生成される
ちょっとした
スタイルを適用
するときに使えるね
WP-SCSSってのもある
便利そう!!
※試してない
まとめ
WordPressとか関係なく
使ったほうがいいよ!
使ったほうがいいよ!
いいよ!!
ありがとうございました
@sou_lab
Web制作者のための
Sassの教科書
Web制作者のための
Sublime Text
の教科書
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Upcoming SlideShare
Loading in...5
×

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

3,296

Published on

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

Published in: Engineering
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,296
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
16
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×