CSSとSCSSはどんな違いがあるの？

Last updated at 2024-08-15Posted at 2024-08-15

はじめに

同じWebページの見た目を作るものなのにCSSとSCSSとぱっと見似ているようなものがあり、業務始めたての頃は、なんじゃこれと思っていました。そこで、この２つの違いについてまとめていこうと思います。

CSSはWebページの見た目を定義する広く活用されている標準的なスタイルシート言語。

基本的な構文:

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
}

概要: SCSSはSassの構文の一つで、CSSに似た構文を持ち、より直感的に書ける。

基本的な構文:

$primary-color: #333;

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: $primary-color;
}

CSSには変数の概念がありませんが、SCSSでは変数を使って色やフォントなどの値を再利用できます。これにより、コードのメンテナンスが容易になります。

CSSでは、セレクタはフラットに書く必要がありますが、SCSSでは一つのセレクタ内に別のセレクタを書くことができ、親子関係を分かりやすく表現できます。

SCSSでは、ミックスインと継承を使って、再利用可能なスタイルの塊を作成することができます。

・小規模なプロジェクトやシンプルなスタイルを持つウェブサイト
・すぐに静的なスタイルを追加したいとき

・中〜大規模なプロジェクト
・複数の開発者が参加するプロジェクト
・複雑なデザインやスタイルの再利用が必要な場合

私は、SCSSの方がわかりやすいし便利で使いやすいと感じています。SCSSを導入することで、より柔軟でメンテナンスしやすいスタイルシートを作成できるようになります。