Sass 入門

知っておくべきこと

続ける前に、以下の基本的な知識が必要です：

• HTML
• CSS

これらの科目を学ぶ前に、私たちの ホームページ 上でこれらのチュートリアルにアクセスしてください。

Sassとは何ですか？

• Sassとは Syntactically Awesome Stylesheet（文法的に素晴らしいスタイルシート）
• SassはCSSエクステンションです
• SassはCSSプレプロセッサです
• SassはすべてのバージョンのCSSと完全に互換性があります
• SassはCSSの重複を減らし、時間を節約します
• SassはHampton Catlinによってデザインされ、Natalie Weizenbaumによって2006年に開発されました
• Sassは無料でダウンロードして使用できます

なぜSassを使うべきですか？

スタイルシートがどんどん大きくなり、複雑になり、保守が難しくなります。これがCSSプレプロセッサが役立つ場所です。

Sassは、CSSに存在しない特性（変数、ネストルール、mixin、インポート、継承、ビルトイン関数など）を使用できるようにします。

Sassの非常に役立つ簡単な例

私たちのウェブサイトには3つの主要な色があります：

これらのHEX値を何回入力する必要がありますか？何回もです。同じ色が変更された場合どうですか？

以下のコードをSassで書くと、上記の値を複数回入力する必要はありません：

Sass 実例

/* 元の色の変数を定義する */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 変数の使用 */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Sassの使用中に、元の色が変更された場合、変更する場所を一箇所で済みます。

Sass はどのように動作しますか？

ブラウザは Sass コードを理解しません。したがって、Sass プレプロセッサが必要で、Sass コードを標準の CSS に変換します。

このプロセスは翻訳（transpiling）と呼ばれ、翻訳器（プログラムの種類）に Sass コードを提供し、CSS コードを取り戻す必要があります。

ヒント：翻訳は、ある言語で書かれたソースコードを別の言語に変換/翻訳するための用語です。

Sass ファイルタイプ

Sass ファイルの拡張子は ".scss" です。

Sass コメント

Sass は標準の CSS コメントをサポートしています /* comment */、さらにインラインコメントのサポートもあり // comment：

Sass 実例

/* 主な色の定義 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 変数の使用 */
.main-header {
  background-color: $primary_1; // ここにインラインコメントを追加できます
}