SASS構文とSCSS構文

この記事ではSASS構文とSCSS構文について説明します。

SASS構文とSCSS構文の違いを詳しく説明し、理解を深めるために具体的な例を示します。

YouTube Video

SASS構文とSCSS構文

SASSは、CSSの機能を拡張するために設計されたスタイルシート言語です。SASSには2つの構文があります。それが、SASS構文とSCSS構文です。

SASSとSCSSの概要

SASS構文

SASS構文は次のように記述します。

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• インデントベースの構文で、波括弧 {} やセミコロン ; を使用しません。
• 簡潔で読みやすいコードを書くことを目的としています。
• 拡張子は.sassです。

SCSS構文

SCSS構文は次のように記述します。

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• CSSに近い構文で、波括弧 {} とセミコロン ; を使用します。
• CSSの既存コードとの互換性が高く、CSSをそのままSCSSファイルに変換できます。
• 拡張子は.scssです。

SASSとSCSSの主な違い

選択の基準

どちらを使用すべきかはプロジェクトやチームのニーズによります。

• SASS構文を選ぶ場合

  • SASS構文では、簡潔でクリーンなコードを記述できます。
  • チーム全体がSASS構文に慣れている場合、SASS構文が適しています。

• SCSS構文を選ぶ場合

  • CSSとの互換性が重要で、CSSに馴染みがあるメンバーが多い場合、SCSS構文が適しています。

SASSとSCSSの利点

SASS構文とSCSS構文の共通の利点として、以下の点が挙げられます。

1. 変数の使用

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• 変数を使うことで、スタイルを一箇所で定義し、複数箇所で再利用できます。デザイン変更も変数の値を変更するだけで一括反映され、保守性が向上します。

2. ミックスイン（Mixin）

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• ミックスインは、複数箇所で繰り返し使うスタイルやベンダープレフィックス付きのコードを一箇所にまとめ、引数を使って柔軟に適用できます。これにより、コードの重複を減らし保守性を高められます。

3. ネスト（Nested Rules）

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• ネストを使うと、HTML構造に沿ってスタイルを階層的に記述でき、関連するルールをまとめやすくなります。これによりコードの可読性と保守性が向上します。

4. 継承（Inheritance）

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• 継承を使うことで、共通のスタイルをまとめて再利用できます。これにより、コードの重複を減らし、一貫性のあるデザインを保てます。

結論

SASSとSCSSのどちらを選ぶかは、開発者の好みやプロジェクトの要件によります。

SASS構文はシンプルさを、SCSS構文はCSS互換性を重視しています。どちらの構文も強力で、CSSの生産性を大幅に向上させることができます。

プロジェクトに最適な選択を行うことで、効率的なスタイルシートの管理を実現できます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video