ネストを覚えた人のためのSassの便利な使い方

ネストを覚えた人のためのSassの便利な使い方 kennymatic (CC BY 2.0)

Try! Try!flickrized (CC BY 2.0) Try!

Variable CSS SpriteNesting + Mixin Vendor Preﬁx Extend

ネストを覚えた人のためのSassの便利な使い方 kennymatic (CC BY 2.0)

同じ色を何回も書くのが面倒 kennymatic (CC BY 2.0)

#AD253A #AD253A #AD253A #AD253A

body { background-color: #AD253A;}#globalHeader { #gNav { color: #AD253A; }}#main #featureList { a { h3 { color: #AD253A; } }}

Where?コードが長いと「あのカラーコード」が見つけにくい mdanys (CC BY 2.0)

いいえ変数を使います

$baseColor: #AD253A; 変数を代入body { background-color: $baseColor; 変数を出力}#globalHeader { #gNav { color: $baseColor; 変数を出力 }}#main #featureList { a { h3 { color: $baseColor; 変数を出力 } }}

Variable 変数数字や単位e.g) 10, 10px, 3emカラーコードe.g) #FF0000, #FFFFFF文字列e.g) foo, border$の後ろに変数名で定義

$radius: 5px;body { $radius : 10px; .box { width: 100px; height: 100px; background-color: #000; border-radius: $radius; 10px ？ }}.box2 { $radius: 20px; width: 100px; height: 100px; background-color: #999; border-radius: $radius; 20px ？}

Noteスタイルで代入した変数は外で使えないスタイルの外で代入したもの＝グローバル変数グローバル変数と名前に同じものをスタイルの中で代入すると、グローバル変数が上書きされる

ご利用は計画的に anakawho (CC BY 2.0)

ご利用は計画的にグローバル変数は1ファイルにまとめてインポートグローバル変数とローカル変数は違いが分かりやすくなるように命名変数に依存しすぎない

この変数ってセレクタに利用できないの？ procsilas (CC BY 2.0)

$baseColor: #AD253A;body { さっき background-color: $baseColor;}#globalHeader { #gNav { color: $baseColor; }}#main #featureList { ココに変数 a { h3 { color: $baseColor; } }}

$course_synbol : "dog";$course_img : "../course/img"; #$course_synbol.box { background-image: url($course_img/title.png);} もしもし？どこからどこまでが変数なの？

>>> Change detected at 22:22:22 to: sample02.scss error _scss/sample02.scss (Line 7: Invalid CSSafter "#": expected id name, was"$course_synbol....")overwrite css/sample02.css

Interpolation#{$dog}でハッシュ＋波括弧で囲うインターポレーション変数と文字列を組み合わせるとき

$course_synbol : "dog";$course_img : "../course/img"; ##{$course_synbol}.box { background-image: url(#{$course_img}/title.png);} もしもし？おｋ！おｋ！これならわかるわ！

$course_synbol : "dog";$course_img : "../course/img"; ##{$course_synbol}.box { background-image: url(#{$course_img}/title.png);}#dog.box { background-image: url(../course/img/title.png);}

ピクセル計算がめんどくさい

計算できます

+ → 加算- → 減算 10 % 3 =1* → 乗算 15 % 3 =0/ → 除算% → 剰余算（あまり）

ul { width: 960px - 20px; SPACE margin: 0 10px; li { float: left; width: ((960px - 20px) - (20px * 2)) / 3; }}

ul { width: 940px; margin: 0 10px;}ul li { float: left; width: 300px;}

演算子の前後にスペースを入れないと

ul { width: 960px - 20px; margin: 0 10px; li { float: left; width: ((960px - 20px) - (20px * 2)) / 3; }}

ul { width: 960px-20px; margin: 0 10px; li { float: left; width: ((960px-20px)-(20px*2))/3; }}

ul { width: 960px-20px; margin: 0 10px;}ul li { float: left; width: 960px -20px-40px/3;}

中途半端に計算数式がそのまま出力

変数も計算できます

ul { $column_gutter: 20px; width: $main-width - 20px; margin: 0 10px; li { float: left; width: (($main_width - 20px)-($column_gutter * 2))/3; margin-right: $column_gutter; }}

ul { width: 940px; margin: 0 10px;}ul li { float: left; width: 300px; margin-right: 20px;}

指定した色に微調整がしたい jerine (CC BY 2.0)

#AD253A #AD253A #AD253A #AD253A

#AD253A ここだけコントラスト取って！

本来ならグラフィックソフトでもいいのですが…© Artsem Martysiuk - Fotolia.com

$baseColor : #AD253A;body { background-color: $baseColor;}#gNav { a { color: darken($baseColor,20%); }}

darken(color, amount)指定した色を暗くする関数color…カラーコードやカラーコードが入っている変数amount…暗くする度合いcolor: darken($baseColor,20%);

$baseColor : #AD253A;body { background-color: $baseColor;}#gNav { a { color: darken($baseColor,20%); }}

body { background-color: #ad253a;}#gNav a { color: #59131e;}

lighten(color, amout)色を明るくするadjust-hue(color, degree)色相の角度をずらすsaturate(color, amout) / desaturate(color, amout)彩度を上げる・下げるmix(color1, color2)色を合成する。lightenより彩度が下がらないので便利

File: SASS_REFERENCEhttp://sass-lang.com/docs/yardoc/ﬁle.SASS_REFERENCE.html

Note目視で確認しないと、想像以上に色が変わることがある緑系はまぶしく感じやすい→調整が必要モックで作り忘れてしまった色指定におすすめ

同じプロパティを書くのがめんどい np&djjewell (CC BY 2.0)

#contents height:0 フ #sub { ッ #main { float:left; タ float:right; } ー } テキストが入ります。フッターテキストが入ります。

.clearfix { *zoom: 1;}.clearfix:after { content:""; clear: both; display: block;}

#contents フ #sub { ッ #main { float:left; タ float:right; } ー } テキストが入ります。フッターテキストが入ります。

#contents.clearfix 見た目に関する名前は #sub { #main { 入れたくない！ float:left; float:right; } } フッターテキストが入ります。フッターテキストが入ります。

#contents { …（中略）… *zoom: 1;}.contents:after { content:""; clear: both; display: block;} これで完結？

横並び横並び in 横並び横並び in 横並び

横並びその都度clearfixを横並び in 横並び書くのは面倒横並び in 横並び

@mixin@include

@mixin clearfix { clearfixの中身を定義 *zoom: 1; &:after { content:""; clear: both; display: block; }}#contents { @include clearfix; clearfixを出力 background-color: #AC2539; // いろんなスタイル}

#contents { *zoom: 1; background-color: #AC2539;}#contents:after { @mixin clearfix { content: ""; *zoom: 1; &:after { clear: both; content:""; clear: both; display: block; display: block; }} } #contents { @include clearfix; background-color: #AC2539; // いろんなスタイル }

@mixin @include変数やCSSのプロパティと値をセットにしたものを定義するために使うものセレクタや疑似セレクタも出力定義するとき→@mixin 名前 {};出力するとき→@include 名前;引数でカスタマイズが可能（次回解説）

Sass/Compassでよく使うモノが知りたい Walt Stoneburner (CC BY 2.0)

画像系image-width sprite-mapimage-height sprite-positionimage-url sprite-file

256px 256px panda.png.panda { width: image-width("panda.png"); /* 256px */ height: image-height("panda.png"); /* 256px */ background-image: image-url("panda.png"); /* url(../img/panda.png?1359267669) */} Iconsmaster - http://www.iconsmaster.com/

CSS系box-sizing transformopacity transition

.box { @include box-sizing("border-box"); /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; */}.box { @include opacity(0.5); /* filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5; */}

Compassは@mixinの塊

どうしても分からなかったら、 CSSを書けばいいじゃない頑張りすぎないこと。

似てるスタイルをスマートにしたい TRÈS BIEN (CC BY 2.0)

.clearfix { *zoom: 1; &:after { content:""; clear: both; display: block; }}#contents { @extend .clearfix; クラスclearfixを拡張 background-color: #AC2539;}

.clearfix, #contents { *zoom: 1;}.clearfix:after, #contents:after { content: ""; clear: both; display: block;}#contents { background-color: #AC2539;}

@extendextendしたセレクタを元のセレクタにつなげて記述する.clearfix, #contents定義したセレクタの疑似セレクタや子要素も同じようにつながる.clearfix, #contents { }.clearfix:after, #contents:after { }

@extend呼び出したセレクタでは、独自に定義したスタイルだけを記述する#contents { background-color: #AC2539;}

.box1 { float: left; width: 300px; margin: 10px 15px; padding: 15px; background-color: #EEEEEE; box-shadow: 0 1px 4px rgba(0,0,0,.3); border-radius: 4px; h1 { margin-bottom: 15px; color: $baseColor; font-size: 25px; font-weight: bold; } p { color: #444444; font-size: 13px; }}

.box2 { @extend .box1; h1 { color: #111; }}.box3 { @extend .box1; background-color: $baseColor; h1 { color: #FFF; } p { color: #FFF; }}

.box1, .box2, .box3 { …（略）…}.box1 h1, .box2 h1, .box3 h1 { margin-bottom: 15px; color: #ac2539; font-size: 25px; font-weight: bold;}.box1 p, .box2 p, .box3 p { color: #444444; font-size: 13px;}.box2 h1 { color: #111;}.box3 { background-color: #ac2539;}.box3 h1 { color: #FFF;}.box3 p { color: #FFF;}

基本スタイルから少しズレたものを作るときに便利

でも亜種10スタイルとなったら…

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9,.box10 { float: left; width: 300px;} うわっ… …（略）….box1 h1, .box2 h1, .box3 h1, .box4 h1, .box5 h1, .box6 h1, .box7 私のセレクタh1, .box8 h1, .box9 h1, .box10 h1 { margin-bottom: 15px; 多すぎ…？ color: #ac2539; …（略）…}.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7p, .box8 p, .box9 p, .box10 p { color: #444444; font-size: 13px;}

IE 9以下に存在するセレクター数制限にはまったhttp://less.carbonfairy.org/post/18072493708

IE 9以下では1つのCSSファイル当たり4,095個までしかセレクターを認識しない。4,096個以上は無視される。

@extendの使用条件の考察深い階層で使うとセレクタが極端に長く呼び出すセレクタ先の例だと#contents なる @include→ネストの階層が浅いものしたら逆にコードが定義されるセレクタ先の例だと.clearﬁx 増える！→プロパティの数が多すぎるときサイト全体でextendする回数とプロパティの数を想定してmixinと使い分けると良さそう

まとめ

Sass / Compassは便利書いたコードがCSSでどうなっているかパーツを組み上げたら確認

大事なことなので 4回言いました。ご利用は計画的に anakawho (CC BY 2.0)

Thank you kennymatic (CC BY 2.0)

Sassの勉強にオススメ！

Sass入門∼より効率的なCSSコーディング上村光星，富田梓，對馬慶子，山田敬美著2012年技術評論社https://gihyo.jp/dp/ebook/2012/978-4-7741-5123-6

http://bikkuri.me	203
https://twitter.com	34
http://tweetedtimes.com	11
http://mrwmyblog.blog107.fc2.com	1

ネストを覚えた人のためのSassの便利な使い方

by Hiroki Shibata on Jan 31, 2013

Accessibility

Upload Details

Usage Rights

4 Embeds 249

Statistics

ネストを覚えた人のためのSassの便利な使い方 Presentation Transcript