SCSSの使い方を初心者用にまとめた | ARUTEGA blog

Webデザイナーの平尾誠です。
現在CSSを書いている人は、SCSS に記法を変えるだけでCSSの記述が極端に減りますよ。

SCSS は一言で言うと、CSSの記法です。

よく使うSCSS の記法は限られています。
調べれば調べるほどSCSSの書き方はありますが、以下のコードをコピペして使えば現場でかなり作業の効率化が図れるはずです。

SCSS ってたくさん書き方とかありますけど、無理に全部使いこなせなくてもかなり便利です。

紹介する記法以外にも、書き方が見つかると思います。
ぜひ試してみてください。

計算
@import
変数
@mixin
@extend
ネスト：入れ子
1. 入れ子の中の入れ子：補完
まとめ

計算

相対的な数値を使ってコーディングする際に便利です。
現場でPSDデータを測りながらする際などはとっても便利。

むしろこれを使わないと、リキッドレイアウトはかけません。

.box {
    padding-bottom: (100/375)*100vw;
}

.box {
    padding-bottom: 37.5vw;
}

@import

@import "general";

_general.scss と名前をつけたscssをimport して呼びます。

cssのimportとは違い、読み込みファイルが肥大しないので、用途ごとにSCSSを分けて使うといいです。

変数

色を後から微調整する時にこれはよく使います。
変数にしていないと後から色を微調整するのに地獄を味わいます。

$black: #333;

.concept {
    background: $black;
}

イージングなどはこのようにしておくとラクですね。

$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);

a 　{
 transition: all 0.3s $easeOutCirc;
}

@mixin

同じスタイルをまとめて記述します。

@mixin h2 {
	text-align: left;
	font-size: 64px;
	letter-spacing: 1px;
	font-family: $font-en;
	margin-top: 50px;
	font-weight: bold;
}

.h2 {
	@include h2;
}

@extend

こちらも使い道は似ていますね。

//中央真ん中にしたい時によくあるやつ
%center {
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.center-contents-something {
    @extend %center
}

ネスト：入れ子

このように、HTMLと構造を同じくしてCSS を記述することで、可読性がよくなります。
記述する文字数も減って幸せ。

.concept {
    background: #fff;
}


.concept-box {
    box-sizing: border-box;
    position: absolute;
    width: 45%;
}

これをSCSSにまとめるとこのようになります。

.concept {
    background: #fff;

    &-box {
        box-sizing: border-box;
        position: absolute;
        width: 45%;
     }
}

入れ子の中の入れ子：補完

階層が深くなってくると&でクラス名をつなげなくなります。
thisに変数として保管しておくことで、こういった使い方もできます。

.price {
    $this: &;

    &-equip {
        color: #fff;

        #{$this}-title {
           color: #000;
        }

    }
}
///// 上と下は同じものです
.price {
    &-equip {
        color: #fff;

        .price-title {
            color: #000;
        }
    }
}