CSSプリプロセッサについて

CSSプリプロセッサについて

CSSプリプロセッサはいくつか種類があります
SASS
LESS
Stylus

など
僕は最近（遅いかもですが）、CSSではなくSASSを使いページを作成しています。
(SASSが一番調べると検索結果が出てくる理由でですが…)

セレクタのネストをしてくれたり、変数が使えたり、計算をなどをしてくれたりします。

まずはネストですが

CSSでかくと

.aaa .bbb .ccc{
	color: #000;
	font-size: XXpx;
}

.aaa .ddd{
	font-size: YYpx;
}

とか、面倒ですよね？

SASSだと

.aaa{
	.bbb{
		.ccc{
			color: #000;
			font-size: XXpx;
		}
	}

	.ddd{
		font-size: YYpx;
	}
}

他にも
CSSで

.aaa{
	margin-top: 50px;
}

.aaa:first-child{
	margin-top: 0;
}

とか面倒ですが
SASSなら

.aaa{
	margin-top:50px;
	&:first-child{
		margin-top: 0;
	}
}

とか、できます。

次は変数のことですが

SASSで

$main-color: #333;
.aaa {
  background: $main-color;
}

とすると
CSSでは

.aaa {
  background: #333;
}

と出力してくれます。
複数の箇所で使ってたりすると、
変数で一発で直してくれるので便利ですよね！

次はSASSで計算したいと思います

.aaa{
	font-size: 17px + 1;
}

とすると
CSSで

.aaa{
	font-size: 18px;
}

としてくれたり
計算というか関数なのですが
SASSで

.aaa {
  width: percentage(.5);
}

とすると
CSSで

.aaa{
	width: 50%;
}

としてくれたりします！

きっと他にも便利な機能はあると思うので
どんどん使って行きたいと思います

ただ SASS → CSS へのコンパイル(変換)は必要なので
自分でコンパイルをするか、タスクランナーに任せてしまいましょう。

と言いつつ毎回自分でコンパイルをするのは面倒なのでタスクランナーを使うことをオススメします。

それでは今回はこの辺で失礼します。

Follow me!