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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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
の教科書

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Sass/Compassの導入と環境構築 by Sou Lab 8193 views

View on Slideshare

1 of 57 Ad

View on Slideshare

1 of 57 Ad