css preprocessor hands-on

CSS PreprocessorHands-on

2012/10/19 @littlebusters

•CSS Preprocessorとは

•GUIビルドツール

•Sass

•ネスト・&・変数・@extend・演算・コメント・@import

•まとめ

セッションのアウトライン

CSS Preprocessorとは

•CSSの弱い部分を補うため、CSSをベースに機能を拡張したもの

•そのままでは使えないため、コンパイル（変換）が必要

Sass LESS Stylus

今日はこれ

GUIビルドツール

Koala Prepros MIXTURE CodeKit LiveReload

Koala Prepros MIXTURE CodeKit LiveReload

$ $ $ $ $m

wα

m

wα

m

wα

m

wα

m

wα

αは変換以外の機能があるもの ※1 Pro版は有料 ※2 Windows版は今のところフリー

※2※1

Koala Prepros MIXTURE CodeKit LiveReload

$ $ $ $ $m

wα

m

wα

m

wα

m

wα

m

wα

αは変換以外の機能があるもの ※1 Pro版は有料 ※2 Windows版は今のところフリー

※2※1

•複数のCSSプリプロセッサーに対応

•ライブリロード

•HTMLテンプレートエンジンに対応

•ローカルサーバ

•静的HTMLへのコンバート など

これだけ揃って、フリー!

Preprosのインストール

準備

Chrome拡張機能のインストール

http://alphapixels.com/prepros/

プロジェクトのフォルダを Drag & Drop

Project Folder

ネスト

•ルールセットの中にルールセットを入れることができる。

ul { list-style: none;}ul li { margin: 5px 0;}

ul { list-style: none; li { margin: 5px 0; }} ネストした部分

ul { list-style: none; li { margin: 5px 0; a { color: #c00; } }} さらにネストもOK

}ul { list-style: none;}ul li { margin: 5px 0;}ul li a { color: #c00;}

ul { list-style: none; li a { color: #c00; }} 子孫セレクタで

ネストしてもOK

}ul { list-style: none;}ul li a { color: #c00;}

.item { width: 320px; @media screen and (min-wid..) { width: 640px; }} @mediaでもOK

}.item { width: 320px;}@media screen and (min-wid..) { .item { width: 640px; }}

.item { margin: { top: 1em; bottom: 1em; left: 0.5em; }} ハイフン付きの

プロパティはネスト可能

}.item { margin-top: 1em; margin-bottom: 1em; margin-left: 0.5em;}

&

•&で親セレクタを参照できる。

•ネストしたルールセットでも、子セレクタ（>）や隣接セレクタ（+）・疑似要素／クラスなどの利用が可能に。

a { color: #c00;}a:hover { color: #600;}

a { color: #c00; &:hover { color: #600; }} 親の a を参照

.header { height: 90px; & > h1 { float: left; & + p { font-size: 62.5%; } }}

.header を参照

.header > h1 を参照

}.header { height: 90px;}.header > h1 { float: left;}.header > h1 + p { font-size: 62.5%;}

.header { height: 60px; .toppage & { height: 90px; }} 途中に入ってもOK

}.header { height: 60px;}.toppage .header { height: 90px;}

変数

•同じ値を変数にして使い回せる

.contents { background-color: #f2f2f2;}.item { background-color: #f2f2f2;}.item-footer { background-color: #f2f2f2;}

$mainBG: #f2f2f2;.contents { background-color: $mainBG;}.item { background-color: $mainBG;}.item-footer { background-color: $mainBG;}

変数の定義

$margin: 1em 0 1em 0.5em;$baseWidth: 320px;.header { width: $baseWidth; margin: $margin;}

色や数値・ショートハンドの値など、割となんでも変数にできる

}.header { width: 320px; margin: 1em 0 1em 0.5em;}

.header { $baseWidth: 320px; width: $baseWidth;}.footer { width: $baseWidth;}

ここでエラー

ルールセット内で定義した変数は、その中のみで利用可能

変数定義

$baseWidth: 640px;.header { $baseWidth: 320px; width: $baseWidth;}.footer { width: $baseWidth;}

同じ変数名

…640px？320px？

}.header { width: 320px;}.footer { width: 320px;}

最後に入れた値が有効

演算

•数値の四則演算や、文字列の合体などができる。

.contents { width: 640px; margin-right: 160px; margin-left: 160px;} widthの1/4

.contents { $baseWidth: 640px; width: $baseWidth; margin-right: $baseWidth / 4; margin-left: $baseWidth / 4;}

変数を併用すると、サイズに変更があっても変数を変えるだけでOK

•-（減算）の後は半角スペースが必要

•／（除算）は、以下のいずれかの条件を満たす必要がある

•変数が含まれている• ()で括られている•他の演算子と一緒に使っている

マイナス値と区別するため

属性値に / を使うものがあるため

content: ‘plus’ + mark;width: 300px + 20;height: 340px - 20;margin-top: 0.25em * 2;$mr: 1em;margin-right: $mr / 4;margin-bottom: (1em / 4);margin-left: 2em - 1em / 4;

content: “plusmark”;width: 320px;height: 320px;margin-top: 0.5em;margin-right: 0.25em;margin-bottom: 0.25em;margin-left: 1.75em;

}

以下は演算できない

height: 340px -20;margin-right: 1em / 4;

スペースがないのでNG数値のみでNG

a:hover { color: (#c00 / 2); background-color: #222 + 10;}

色も演算可能

}a:hover { color: #660000; background-color: #2c2c2c;}

@extend

•ルールセット内に、他のルールセットを読み込める。

.link { margin-top: 1em; color: #009;}.link-outside { margin-top: 1em; color: #009; background-color: #f2f2f2;}

.link { margin-top: 1em; color: #009;}.link-outside { @extend .link; background-color: #f2f2f2;}

.defaultWhiteSpace { margin: 1em 0.5em; padding: 1.5em 1em;}.item { @extend .defaultWhiteSpace; background-color: #f2f2f2;}.block { @extend .defaultWhiteSpace; background-color: #333;}

}.whiteSpace, .item, .block { margin: 1em 0.5em; padding: 1.5em 1em;}.item { background-color: #f2f2f2;}.block { background-color: #333;}

}.whiteSpace, .item, .block { margin: 1em 0.5em; padding: 1.5em 1em;}.item { background-color: #f2f2f2;}.block { background-color: #333;}

不要なセレクタも変換される

%defaultWhiteSpace { margin: 1em 0.5em; padding: 1.5em 1em;}.item { @extend %defaultWhiteSpace; background-color: #f2f2f2;}.block { @extend %defaultWhiteSpace; background-color: #333;}

セレクタの先頭を % にする（プレースホルダーセレクタ）

}.item, .block { margin: 1em 0.5em; padding: 1.5em 1em;}.item { background-color: #f2f2f2;}.block { background-color: #333;}

•@media内で、@extendしたい場合は、ルールセットを@media内で書くこと

%link { margin-top: 1em; color: #009;}@media screen and (min-wid..) { .link-item { @extend: %link; }}

アカン パターン

@media screen and (min-wid..) { %link { margin-top: 1em; color: #009; } .link-item { @extend: %link; }}

コメント

/* comment */通常のコメント（変換されても基本的に残る）

// comment1行コメント（変換時に削除される）

/*! comment */必ず残るコメント

@import

•リンクになるのではなく、変換時に読み込んだファイルを1つにまとめる。

•CSSと違い、ファイルのどの位置に書いてもOK（ルールセット内でもOK）

•Sassファイルを読み込んだ場合、そのファイルの変数の利用や@extendでルールセットを呼び出せる

@import ‘oldstyle.css’; : :@import ‘config.scss’; : :@import ‘base’;

Sassファイルなら拡張子を省略できる

I

I I I

style.scss

config.scss base.scss layout.scss

一つのファイルにまとめる

I

I I I

style.scss

config.scss base.scss layout.scss

CSSファイルが生成されてしまう？

•変換する必要のないファイルは、パーシャルファイルにする。

•ファイル名の先頭に _（アンダーバー）を付けるとパーシャルファイルに。

_base.scssパーシャルファイルのファイル名

@import ‘base’;@importでは、＿の省略可能

まとめ

ネスト & $親セレクタの参照 変数

@extend

コメント @import

今日覚えて帰る

+-*/演算

@mixin @for

@function

もっと機能があります

@if

@while @each

もっと勉強したい！

2,940円

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

ステマじゃないよ

お疲れさまでした！