Sass（SCSS記法）を使ってみよう！

Sassとは？

Sassとは、CSSをより使いやすくするための言語で、その記法としてScssとSASSがあります。
ここではScssでの記法を説明します。

Sassは特に、”変数を使用することができること”と”入れ子でCSSを記述できる”ことは大きな特徴と言えます。

div {
    width: 100px;
}
 
div p {
    font-size: 12px;
}

これをScssで書くと下記のようになります。

div {
    width: 100px;

    p {
      font-size: 12px;
    }
}

このように記述量を減らすことができます。
また、入れ子の形にすることで他の箇所への影響を出さないように管理することもできます。
例えば、.box1の中の.content というクラスだけ赤にして、.box2の中の.contentは青にする。というような場合は以下のように書くことができます。

.box1 {
    .content {
      background-color: red;
    }
}
.box2 {
    .content {
      background-color: blue;
    }
}

どのクラスの中にぞんざいするクラスを指定しているのかがみやすくなっていると思います。

ここではDIVパズル01をSassを使うとどのように作ることができるかを説明します。

せっかくなので変数も使ってみます。$color-blue: blue;のように変数を指定して使っています。