概要

本記事では、スクリプト言語Sassを用いたコーディングを紹介します。

デザインの保守性・作業効率に大きく差がつく技術として、参考いただければ幸いです！

Sassとは

💡

CSSを拡張して書きやすく・見やすくしたスタイルシート言語

Syntactically Awesome StyleSheetの略称で、日本語に訳すと「構文的に優れたスタイルシート」の意味になります。どのような点がCSSと比べて優れているか、基本的なネスティング、変数、テンプレートの3機能を例に解説します。（※解説ではSCSS記法を用いています。また、分かりやすくするためイメージの実装に必要だが記載していないcssプロパティがございます）

イメージ

今回は以下のようなシンプルな構造のwebページに対して、main配下のdivタグにスタイルの指定を行います。

イメージはmainタグ中にdiv要素が2つあり、それぞれクラス名で左右を判別できます。

div要素に対して、対象プロパティはwidth, height, colorとします。

①ネスティング

width, heightは共通として、文字色だけそれぞれ変更したい場合はどうすればいいでしょうか？

一般的なCSSの記述とSassの記述を比べてみます。

CSS Sass

main .content-left{
  width: 250px;
  height: 100px;
}

main .content-left p {
  color: green;
}

main .content-right {
  width: 250px;
  height: 100px;
}
main .content-right p {
  color: red;
}

main {
  .content-left {
    width: 250px;
    height: 100px;
    p {
      color: green;
    }
  }

  .content-right {
    width: 250px;
    height: 100px;
    p {
      color: red;
    }
  }
}

見比べてみると、まだコード量はあまり差がありませんがmain配下のcontent-left, rightクラスでpタグに対してプロパティを指定している依存関係が分かりやすくなっていると思います。

タグの依存関係が把握しやすく、記述が楽になるメリットがありますが、あまり深いネスティングには注意が必要です。コードの可読性が下がる、スタイルの優先度が上がり編集が難しくなることに気を付けていきましょう。

②変数

それでは、content-left, rightのwidthとheightの値を変更したい場合ついて考えてみます。

先ほどの記述ではCSS, Sassどちらもコンテンツごとに個別にwidth, heightプロパティを指定しているため、コンテンツの数だけ値を変更する必要がありました。これではサイトの規模が大きくなるほど手間がかかり、ヒューマンエラーの基となってしまいます。保守性を高めるためにはどうすればいいでしょうか？

CSS Sass

main .content-left{
  width: 350px;
  height: 200px;
}

main .content-left p {
  color: green;
}

main .content-right {
  width: 350px;
  height: 200px;
}
main .content-right p {
  color: red;
}

$content-width:350px;
$content-height:200px;

main {
  .content-left {
    width: $content-width;
    height: $content-height;
    p {
      color: green;
    }
  }

  .content-right {
    width: $content-width;
    height: $content-height;
    p {
      color: red;
    }
  }
}

CSSでは個別に値を変更しましたが、Sassではwidht, heightそれぞれ変数に値を格納してみました。このように共通するプロパティ値の変数を用意することで、今後変更があった際も修正が簡単になりますね！

管理者画面とユーザ画面で、同じ表を設置したいけど色は変えたい場合など、変数が活きてくる場面は多いと思うので有効活用していきましょう。

③テンプレート

次に、クラスcontent-centerでコンテンツを増やしたい場合について考えます。

先ほどまでと同様に、main配下に追加したcontent-centerに対してwidth, heightに変数を用いる形でも実装できますが、コンテンツが増えるたびにwidht, heightの記述をする必要があり、text-alignなど新たなプロパティを追加する場合も手間がかかります。

では、どのようにすれば手間を減らせるでしょうか？

CSS Sass

main .content-left{
  width: 350px;
  height: 200px;
}

main .content-left p {
  color: green;
}

main .content-center{
  width: 350px;
  height: 200px;
}

main .content-center p {
  color: blue;
}

main .content-right {
  width: 350px;
  height: 200px;
}
main .content-right p {
  color: red;
}

$content-width:350px;
$content-height:200px;

@mixin content-prop {
  width: $content-height;
  height: $content-width;
}

main {
  .content-left {
    @include content-prop();
    p {
      color: green;
    }
  }

  .content-center {
    @include content-prop();
    p {
      color: blue;
    }
  }

  .content-right {
    @include content-prop();
    p {
      color: red;
    }
  }
}

Sassでは@mixinでwidth, heigtの値を指定するモジュール（テンプレート）を作成し、コンテンツクラスごとに@includeでcontent-propモジュールを呼び出しています。このようにテンプレート化することで、各クラスへのスタイル記述はかなり楽になりました！まだプロパティが少ないためそこまで違いが分かりにくいかもしれませんが、サイトの規模が大きくなるにつれ、生のCSSとSassでデザインの保守性・作業効率に大きく差がつくことが実感できます。

まとめ

ここまでご覧くださってありがとうございました！

CSSの代わりにSassを利用する考え方、いかがでしたでしょうか。ネスティング、変数、テンプレート以外にも演算子が利用できる、アンパサンドで:hoverなどを分かりやすくできる、ifやfor, whileなど条件分岐が可能、などSassにはかなりのメリットがあります。ぜひコーディングの参考にしていただければと思います。