CSSフレームワーク、CSSプリプロセッサー、その他

2024-04-02

SCSSとSassの違い

Sass記法は、C言語のようなインデントベースの構文を使用します。セミコロンや括弧は必要ありません。

#header {
  color: $main-color;
  font-size: 16px;

  &:hover {
    color: $accent-color;
  }
}

SCSS記法は、CSSの構文に似たものです。セミコロンや括弧が必要で、インデントは任意です。

#header {
  color: $main-color;
  font-size: 16px;

  &:hover {
    color: $accent-color;
  }
}

どちらを選ぶかは、個人の好みやプロジェクトの要件によって異なります。

Sass記法は、より簡潔で読みやすいコードになります。
SCSS記法は、CSSの構文に近いため、CSSに慣れている人にとっては学習しやすいでしょう。

SCSSとSassは、CSSをより効率的に記述するためのツールです。どちらを選ぶかは、個人の好みやプロジェクトの要件によって異なります。

SCSS

// 変数
$main-color: #ff0000;
$accent-color: #00ff00;

// クラス
.button {
  color: $main-color;
  font-size: 16px;

  &:hover {
    color: $accent-color;
  }
}

// ネスト
.container {
  width: 500px;
  margin: 0 auto;

  .header {
    background-color: $main-color;
    padding: 10px;
  }

  .content {
    background-color: #ffffff;
    padding: 20px;
  }
}

Sass

// 変数
$main-color: #ff0000;
$accent-color: #00ff00;

// クラス
.button
  color: $main-color
  font-size: 16px

  &:hover
    color: $accent-color

// ネスト
.container
  width: 500px
  margin: 0 auto

  .header
    background-color: $main-color
    padding: 10px

  .content
    background-color: #ffffff
    padding: 20px

出力結果

上記のコードは、以下のCSSを生成します。

.button {
  color: #ff0000;
  font-size: 16px;
}

.button:hover {
  color: #00ff00;
}

.container {
  width: 500px;
  margin: 0 auto;
}

.container .header {
  background-color: #ff0000;
  padding: 10px;
}

.container .content {
  background-color: #ffffff;
  padding: 20px;
}