CSSを効率よく記述する「SASS」

どうも、tomoyanです。

今回は、cssを効率よく記述する「sass(サス)」というものを導入してみました！

「sass」とは、cssには無かった変数などを使えるようにしたものです。

例えば、以下のよなコードがあったとします。

#main {
 background-color: #000000;
 width: 900px;
}

#main p {
 background-color: #000000;
 width:890px;
}

この場合、背景(background-color)をそれぞれ同じ色なのに、
2回も同じ記述をしなければいけません。

さらに、変更などがあった場合2回も書き直さないといけません..

近くにある場合はまだいいですが、200行とか離れていたらめんどくさいですよね。

そこで！「sass」の登場です！！

上記のようなコードの場合、「sass」で記述すると、

$haikei: #000000;
$haba: 900px;

#main {
 background-color: $haikei;
 width: 900px;

 p {
  background-color: $haikei;
  width:$haba - 10;
 }

}

と記述できます。

何かお気づきの方もいらっしゃるでしょうが...

そうです！「sass」は入れ子(ネスト)にすることや演算も出来ちゃうんです！！

どうですか、この記事で「sass」に興味を持っていただければ幸いです。

次回は、「sass」の導入方法と開発環境について説明していきます。

ではでは。