Sass（SCSS記法）でよく使う書き方まとめ

更新日：2022年2月4日

CSSをより使いやすく、より変更に強くする為のSassが最近流行ってきており、今後Webにおけるスタンダードになっていきそうです。
SassにはSASS記法とSCSS記法の2種類がありますが、SCSS記法についてのまとめです。
尚、Sassの導入については既にしているものとします。

&が使える

例えばHTMLは下記のように書きます。

	
ヘッダーのタイトル
	
ヘッダーのテキスト

そして、SCSSでは下記のように書きます。

.header {
	margin:0 auto;
	width:70%;

	&__title {
		font-size:22px;
		color: red;
	}

	&__text {
		font-size:14px;
	}
}

通常のCSSでは
.header__title
と書く場合を
&__titleと略して書くことが出来ます。

下記のように疑似要素である:hoverにも同様の使い方が出来ます。

a { 
	color:#fff;

	&:hover {
		color: blue;
	}
}

変数が使える

例えば下記のようにあらかじめ変数を宣言しておくと、変数名でCSSを呼び出すことが出来ます。

$mainColor: #ccc;

color: $mainColor;

これって何が便利なの？って最初は思うのですが、サイトには必ずメインカラーがありますよね。
メインカラーを変数で宣言しておくことでメインカラーを変更したい場合にその変数のカラーコードを変更するだけで一括で反映されます。

メディアクエリの書き出しが容易

例えば下記のようにあらかじめブレイクポイントを480pxで宣言しておくと、メディアクエリを容易に呼び出すことが出来ます。

$media480: 480px;
@mixin media480 {
	@media only screen and (max-width: $media480) {
		@content;
	}
}

.pc {
	display: block;

	@include media480 {
		display: none;
	}
}

おわかり頂けたでしょうか。
@include media480 {}
の中にCSSを書くだけで480px以下のデバイスに適用されます。

最初は使いにくく感じるのですが、慣れると普通のCSSが面倒臭く感じてきたりします。
ご活用下さい！