WordPressでCSSプリプロセッサ入門
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,201 views

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

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

Statistics

Views

Total Views
2,201
Views on SlideShare
1,774
Embed Views
427

Actions

Likes
8
Downloads
6
Comments
0

7 Embeds 427

http://yotsuba-d.com 215
http://ribbon-works.jp 144
https://twitter.com 42
http://s.deeeki.com 10
http://feedly.com 6
http://www.feedspot.com 5
http://www.slideee.com 5
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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... PHPみたいな ことができるね
  • コンパイル?
  • 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 { min-height: 48px; //padding: 0 10px; } 一行コメント 地味に便利
  • パーシャル
  • /* 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'); ダメよ〜 ダメダメ とあるテーマファイル
  • 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: 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 コンパイルすると...
  • セマンティックさ が無くなるけど、 必要なときもあるよね
  • Jetpack
  • Jetpack WordPressでコンパイルができる 「カスタムCSS」
 を有効化する
  • Jetpack 外観 > CSS編集
  • Jetpack データベースに動的にCSSが生成される
  • Jetpack データベースに動的にCSSが生成される ちょっとした スタイルを適用 するときに使えるね
  • WP-SCSSってのもある
  • 便利そう!! ※試してない
  • まとめ
  • WordPressとか関係なく
  • 使ったほうがいいよ!
  • 使ったほうがいいよ! いいよ!!
  • ありがとうございました @sou_lab Web制作者のための Sassの教科書 Web制作者のための Sublime Text の教科書