wordpressでcssプリプロセッサ入門

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

WordBench Tokyo 2014.03.29

自己紹介

Sou-Lab.森田壮 @sou_lab フリーランス

Web制作者のための Sassの教科書 Web制作者のための SublimeTextの教科書

デザインとかコーディングとかディレクションとか

Ustもやるよ

CSSプリプロセッサってなに？

CSS PreprocessorCSSメタ言語とも呼ばれる。 CSSを拡張して色々と機能を増やしたもの。

ほかにも色々。数多く存在している。

CSS PreprocessorCSSメタ言語とも呼ばれる。 CSSを拡張して色々と機能を増やしたもの。

ほかにも色々。数多く存在している。

SassもLessもStylusもできることはだいたい同じ

CSS PreprocessorCSSでできなかったことができるようになる！

・ネスト！(入れ子) ・変数！・四則演算！(+-*/) ・関数！・要素の継承！(Mixin,extend) ・制御構文！(ループやif文) ・and more...

CSS PreprocessorCSSでできなかったことができるようになる！

・ネスト！(入れ子) ・変数！・四則演算！(+-*/) ・関数！・要素の継承！(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などの　フレームワーク・本も出てる

なんでCodeKit？

なんでCodeKit？今回はCodeKitを選びました。

・楽だから・高機能・更新頻度が高い

機能的には黒い画面が最強。

でもMac専用 $29

Sass Meister http://sassmeister.com/

ブラウザですぐ試せる

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";


compile!!

style.css


compile!!

style.css

style.css ひとつでオケ

ループ

@for $i from 1 through 10 { .mb-#{$i*10} { margin-bottom: #{$i*10}px; } }

@forfor文で繰り返し

@for $i from 1 through 10 { .mb-#{$i*10} { margin-bottom: #{$i*10}px; } }

@forfor文で繰り返し

ループは他にも@whileや@eachも

あるんだ

.mb-10 { margin-bottom: 10px; }










@forコンパイルすると...

セマンティックさが無くなるけど、

必要なときもあるよね

Jetpack

JetpackWordPressでコンパイルができる

「カスタムCSS」を有効化する

Jetpack外観＞ CSS編集

Jetpackデータベースに動的にCSSが生成される

Jetpackデータベースに動的にCSSが生成される

ちょっとしたスタイルを適用

するときに使えるね

WP-SCSSってのもある

便利そう！！ ※試してない

まとめ

WordPressとか関係なく

使ったほうがいいよ！

使ったほうがいいよ！いいよ！！

ありがとうございました@sou_lab

Web制作者のための Sassの教科書

Web制作者のための Sublime Textの教科書

wordpressでcssプリプロセッサ入門

Engineering