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

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

on

  • 1,999 views

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

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

Statistics

Views

Total Views
1,999
Views on SlideShare
1,586
Embed Views
413

Actions

Likes
8
Downloads
6
Comments
0

7 Embeds 413

http://yotsuba-d.com 205
http://ribbon-works.jp 142
https://twitter.com 42
http://s.deeeki.com 9
http://feedly.com 6
http://www.feedspot.com 5
http://www.slideee.com 4
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 の教科書