【読書】Sassの教科書

@media のネスト

@mediaをネストすることができます。レスポンシブデザインのときに便利です。

#main {
    @media screen and (max-width:640px) {
    }
}

// ↓ コンパイル

#main {
}
@media screen and (max-width:640px) {
    #main {
    }
 }

プロパティのネスト

borderやmarginを指定したとき、特定の部分だけ別のスタイルを適用します。

.itme {
    margin: 0 {
        left: 10px;
    }

    border: 1px solid #999 {
        bottom: 0;
    }
}

// ↓ コンパイル

.item {
    margin: 0;
    margin-left: 10px;
    border: 1px solid #999999;
    border-bottom: 0;
}

@extend プレースホルダーセレクト

今までは継承元のセレクタをクラスで指定していたので、コンパイル後も元のクラスが残っていました。継承元をクラスではなく%にすることでコンパイル後には出力されなくなります。継承元の%boxが、コンパイル後のファイルからは消去されています。

%box {
    margin: 0 auto;
}

.item {
    @extend %box
}

// ↓ コンパイル

.item {
    margin: 0 auto;
}

色の調整

色彩関係の関数が多数あります。

演算

hoverの指定のときに便利そうです。コンパイル後は16進数になります。変数やキーワード（blueなど）、rgb()関数、数値でも計算できます。

a {
    color: #000 + #111;
}

// ↓ コンパイル

a {
    color: #111111;
}

rgba()

cssではできないrgba()での16進数の色指定がSassならできます。

.item {
    color: rgba(#6a5468, 0.3);
}

// ↓ コンパイル

.item {
    color: rgba(106,84,104,0.3);
}

lighten()

輝度を指定数上げます。

.item {
    color: lighten(#000, 30%);
}

// ↓ コンパイル

.item {
    color: #4d4d4d;
}

darken()

輝度を指定数下げます。

.item {
    color: darken(#fff, 20%);
}

// ↓ コンパイル

.item {
    color: #cccccc;
}

mix()

中間色を作ります。第三引数の%の数値が大きければ左の数値寄りに、小さければ右の数値寄りになります。

.item {
    color: mix(#000, #fff, 50%);
}

// ↓ コンパイル

.item {
    color: #7f7f7f;
}

まとめ

以上、知らなかったものをいくつかメモしました。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズはとても丁寧で分かりやすいのでおすすめです。サンプルがWeb制作者のためのSassの教科書 - 公式サポートサイトで見れます。