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

ネストを覚えた人のための

Sassの
便利な使い方

kennymatic (CC BY 2.0)

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

Variable
CSS Sprite
Nesting

+

Mixin
Vendor Preﬁx
Extend

同じ色を何回も
書くのが面倒


#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; 変数を出力
    }
}
    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;
    }
}
ココに変数
    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 CSS
after "#": expected id name, was
"$course_synbol....")
overwrite css/sample02.css

Interpolation
#{$dog}でハッシュ＋波括弧で囲う

インターポレーション

変数と文字列を組み合わせるとき


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

もしもし？
おｋ！おｋ！これならわかるわ！


##{$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

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

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

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

darken(color, amount)
指定した色を暗くする関数

color…カラーコードやカラーコードが
入っている変数

amount…暗くする度合い
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_REFERENCE
http://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 clearfix { clearfixの中身を定義
    *zoom: 1;
    &:after {
        content:"";
        clear: both;
        display: block;
    }
}
#contents {
    @include clearfix; clearfixを出力
    background-color: #AC2539;
    // いろんなスタイル
}

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

@mixin @include
変数やCSSのプロパティと値をセットに
したものを定義するために使うもの

セレクタや疑似セレクタも出力

定義するとき→@mixin 名前 {};

出力するとき→@include 名前;

引数でカスタマイズが可能（次回解説）

Sass/Compassで
よく使うモノが
知りたい

Walt Stoneburner (CC BY 2.0)

画像系
image-width sprite-map
image-height sprite-position
image-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 transform
opacity 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;
    */
}

どうしても分からなかったら、
CSSを書けばいいじゃない

頑張りすぎないこと。

似てるスタイルを
スマートにしたい

TRÈS BIEN (CC BY 2.0)

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

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

@extend
extendしたセレクタを元のセレクタに
つなげて記述する
.clearfix, #contents

定義したセレクタの疑似セレクタや子要素も
同じようにつながる
.clearfix, #contents { }
.clearfix:after, #contents:after { }

@extend
呼び出したセレクタでは、独自に定義した
スタイルだけを記述する

#contents {
}

.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;
    h1 {
        color: #FFF;
    }
    p {
        color: #FFF;
    }
}

.box1, .box2, .box3 {
…（略）…
}
.box1 h1, .box2 h1, .box3 h1 {
  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 {

多すぎ…？
  color: #ac2539;
…（略）…
}
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7
p, .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


Sassの勉強に
オススメ！

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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

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

Semelhante a ネストを覚えた人のためのSassの便利な使い方 (20)

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