css preprocessor hands-on

78
CSS Preprocessor Hands-on 2012/10/19 @littlebusters

Upload: littlebustersreply

Post on 13-Jun-2015

2.158 views

Category:

Design


1 download

DESCRIPTION

黒い画面とCPPハンズオン + HTML5KARUTA in 岡山 の、「CSS Preprocessor」編で使用したスライドです。

TRANSCRIPT

Page 1: CSS Preprocessor Hands-on

CSS PreprocessorHands-on

2012/10/19 @littlebusters

Page 2: CSS Preprocessor Hands-on

•CSS Preprocessorとは

•GUIビルドツール

•Sass

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

•まとめ

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

Page 3: CSS Preprocessor Hands-on

CSS Preprocessorとは

Page 4: CSS Preprocessor Hands-on

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

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

Page 5: CSS Preprocessor Hands-on

Sass LESS Stylus

今日はこれ

Page 6: CSS Preprocessor Hands-on

GUIビルドツール

Page 7: CSS Preprocessor Hands-on

Koala Prepros MIXTURE CodeKit LiveReload

Page 8: CSS Preprocessor Hands-on

Koala Prepros MIXTURE CodeKit LiveReload

$ $ $ $ $m

m

m

m

m

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

※2※1

Page 9: CSS Preprocessor Hands-on

Koala Prepros MIXTURE CodeKit LiveReload

$ $ $ $ $m

m

m

m

m

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

※2※1

Page 10: CSS Preprocessor Hands-on

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

•ライブリロード

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

•ローカルサーバ

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

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

Page 11: CSS Preprocessor Hands-on

Preprosのインストール

準備

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

http://alphapixels.com/prepros/

Page 12: CSS Preprocessor Hands-on

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

Project Folder

Page 13: CSS Preprocessor Hands-on
Page 14: CSS Preprocessor Hands-on

ネスト

Page 15: CSS Preprocessor Hands-on

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

Page 16: CSS Preprocessor Hands-on

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

Page 17: CSS Preprocessor Hands-on

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

Page 18: CSS Preprocessor Hands-on

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

Page 19: CSS Preprocessor Hands-on

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

Page 20: CSS Preprocessor Hands-on

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

ネストしてもOK

Page 21: CSS Preprocessor Hands-on

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

Page 22: CSS Preprocessor Hands-on

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

Page 23: CSS Preprocessor Hands-on

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

Page 24: CSS Preprocessor Hands-on

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

プロパティはネスト可能

Page 25: CSS Preprocessor Hands-on

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

Page 26: CSS Preprocessor Hands-on

&

Page 27: CSS Preprocessor Hands-on

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

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

Page 28: CSS Preprocessor Hands-on

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

Page 29: CSS Preprocessor Hands-on

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

Page 30: CSS Preprocessor Hands-on

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

.header を参照

.header > h1 を参照

Page 31: CSS Preprocessor Hands-on

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

Page 32: CSS Preprocessor Hands-on

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

Page 33: CSS Preprocessor Hands-on

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

Page 34: CSS Preprocessor Hands-on

変数

Page 35: CSS Preprocessor Hands-on

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

Page 36: CSS Preprocessor Hands-on

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

Page 37: CSS Preprocessor Hands-on

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

変数の定義

Page 38: CSS Preprocessor Hands-on

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

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

Page 39: CSS Preprocessor Hands-on

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

Page 40: CSS Preprocessor Hands-on

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

ここでエラー

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

変数定義

Page 41: CSS Preprocessor Hands-on

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

同じ変数名

…640px?320px?

Page 42: CSS Preprocessor Hands-on

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

最後に入れた値が有効

Page 43: CSS Preprocessor Hands-on

演算

Page 44: CSS Preprocessor Hands-on

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

Page 45: CSS Preprocessor Hands-on

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

Page 46: CSS Preprocessor Hands-on

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

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

Page 47: CSS Preprocessor Hands-on

•-(減算)の後は半角スペースが必要

•/(除算)は、以下のいずれかの条件を満たす必要がある

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

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

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

Page 48: CSS Preprocessor Hands-on

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;

Page 49: CSS Preprocessor Hands-on

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

}

Page 50: CSS Preprocessor Hands-on

以下は演算できない

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

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

Page 51: CSS Preprocessor Hands-on

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

色も演算可能

Page 52: CSS Preprocessor Hands-on

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

Page 53: CSS Preprocessor Hands-on

@extend

Page 54: CSS Preprocessor Hands-on

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

Page 55: CSS Preprocessor Hands-on

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

Page 56: CSS Preprocessor Hands-on

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

Page 57: CSS Preprocessor Hands-on

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

Page 58: CSS Preprocessor Hands-on

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

Page 59: CSS Preprocessor Hands-on

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

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

Page 60: CSS Preprocessor Hands-on

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

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

Page 61: CSS Preprocessor Hands-on

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

Page 62: CSS Preprocessor Hands-on

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

Page 63: CSS Preprocessor Hands-on

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

アカン パターン

Page 64: CSS Preprocessor Hands-on

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

Page 65: CSS Preprocessor Hands-on

コメント

Page 66: CSS Preprocessor Hands-on

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

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

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

Page 67: CSS Preprocessor Hands-on

@import

Page 68: CSS Preprocessor Hands-on

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

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

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

Page 69: CSS Preprocessor Hands-on

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

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

Page 70: CSS Preprocessor Hands-on

I

I I I

style.scss

config.scss base.scss layout.scss

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

Page 71: CSS Preprocessor Hands-on

I

I I I

style.scss

config.scss base.scss layout.scss

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

Page 72: CSS Preprocessor Hands-on

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

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

Page 73: CSS Preprocessor Hands-on

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

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

Page 74: CSS Preprocessor Hands-on

まとめ

Page 75: CSS Preprocessor Hands-on

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

@extend

コメント @import

今日覚えて帰る

+-*/演算

Page 76: CSS Preprocessor Hands-on

@mixin @for

@function

もっと機能があります

@if

@while @each

Page 77: CSS Preprocessor Hands-on

もっと勉強したい!

2,940円

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

ステマじゃないよ

Page 78: CSS Preprocessor Hands-on

お疲れさまでした!