CSS Preprocessor Hands-on
-
Upload
littlebustersreply -
Category
Design
-
view
2.161 -
download
1
description
Transcript of 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の教科書
ステマじゃないよ
お疲れさまでした!