Sassとは

• Sassとは
• SassとSCSSの違い
• Sassの基本的な特徴

Sassとは

Sass（サス、サース）は Syntactically Awesome Stylesheetsといいます。 CSSをより効率的に記述するためのメタ言語です。 メタ言語とは、他の言語（この場合はCSS）を拡張し、より便利にするための言語を指します。Sassには、「Sass」と「SCSS」の2つの文法（書き方）があり、自分が使いやすい方を選んで利用できます。

Sassを使用することで、CSSの保守性や再利用性が向上し、効率的にスタイルシートを作成できます。
特に大規模プロジェクトやチーム開発では、作業効率やデザインの一貫性が高まり、フロントエンド開発者やデザイナーにとって大きな強みとなります！

SassとSCSSの違い

Sass（インデント形式）

Sassは、インデント（字下げ）を使って階層を表現します。
波括弧（{}）やセミコロン（;）を使用しないため、コードがシンプルで見た目もすっきりとします。視覚的に整理されており、読みやすいのが特徴です。

$primary-color: #3498db



body
  
　color: $primary-color

SCSS（波括弧形式）

SCSSは、Sassの新しい文法で、CSSに近い構文を使用します。
波括弧（{}）とセミコロン（;）を使うため、CSSに慣れている人にとって扱いやすいのが特徴です。

$primary-color: #3498db;



body {
  
　color: $primary-color;

}

※デザデジでは、これからの学習や実践でSCSSを使用します。

Sassの基本的な特徴

Sassでは、CSSの基本構造をそのまま使いながら、追加の機能（ネスト、変数、演算、ミックスインなど）を使用することができます。これにより、簡単に拡張可能なコードを記述できます。

ネスト構造

HTMLの構造に合わせてスタイルを階層的に記述できます。
※ネスト構造に関しては「Sassの基本」の章の「Sassの書き方」のステップで説明します。
「Sassの書き方」を確認したい方はこちら

nav {
  ul {
    li {
      a {
        color: blue;
      }
    }
  }
}

上記のコードは以下のCSSにコンパイルされます。

nav ul li a { color: blue; }

補足：「CSSにコンパイル」とは

CSSにコンパイルとは、Sassで書かれたコードをブラウザが理解できる通常のCSSに変換することです。
SassはCSSの拡張機能なので、ブラウザは直接Sassを理解できません。そのため、SassコードをCSSに変換する「コンパイル」作業が必要です。コンパイル後のCSSがブラウザで読み込まれ、表示に使われます。

※コンパイルの方法に関しては「Sassの基本」の章の「Sassの書き方」のステップで説明します。
「Sassの書き方」を確認したい方はこちら

変数

再利用可能な値を変数として定義できます。
「変数」を確認したい方はこちら

$primary-color: #3498db;  

body { 
　background-color: $primary-color;
 }

@mixin / @include

繰り返し使うスタイルを再利用できます。
「@mixin / @include」を確認したい方はこちら

@mixin border-radius($radius) { 
　border-radius: $radius; 
}  

button { 
　@include border-radius(10px); 
}

@extend

他のセレクタのスタイルを継承できます。
「@extend」を確認したい方はこちら

%button-style { 
　padding: 10px; 
　border: none; 
} 

 .btn {
　 @extend %button-style; 
　background-color: blue; 
}

演算

数値や色の計算ができます。
「演算」を確認したい方はこちら

$base-spacing: 10px;  

.container { 
　margin: $base-spacing * 2; 
}

以上が、「Sassとは」についての説明でした。
sassはCSSを効率的に記述するための拡張ツールです。基本的な書き方を覚えて、実際にコードを書いてみることで、より深く理解することができます。

次のステップで、「ターミナルについて」について説明していきます。