すでに知っておくべきこと

続行する前に、以下の基本を理解しておく必要があります。

• HTML
• CSS

これらの主題を最初に学習したい場合は、当社のチュートリアルを見つけてください。ホームページ。

サスとは何ですか？

• サスを意味するS構文的にあすごいSそんなにsと呼ばれます
• Sass は CSS の拡張機能です
• Sass は CSS プリプロセッサです
• Sass は CSS のすべてのバージョンと完全に互換性があります
• Sass は CSS の繰り返しを減らし、時間を節約します。
• Sass は Hampton Catlin によって設計され、Natalie Weizenbaum によって開発されました。 2006年
• Sass は無料でダウンロードして使用できます

Sass を使用する理由

スタイルシートはますます大きく、より複雑になり、保守が難しくなります。ここで CSS プリプロセッサが役に立ちます。

Sass を使用すると、変数、ネストされたルール、ミックスイン、インポート、継承、組み込み関数など、CSS に存在しない機能を使用できます。

Sass が役立つ簡単な例

3 つのメインカラーがある Web サイトがあるとします。

では、これらの 16 進値を何回入力する必要があるでしょうか?多くの時間。同じ色のバリエーションはどうでしょうか？

上記の値を何度も入力する代わりに、Sass を使用して次のように記述できます。

そのため、Sass を使用していて原色が変更される場合、変更する必要があるのは 1 か所だけです。

Sass はどのように機能しますか?

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

このプロセスはトランスパイルと呼ばれます。したがって、トランスパイラー (ある種のプログラム) に Sass コードを与えて、CSS コードを返す必要があります。

Sass ファイルの種類

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

サスのコメント

Sass は標準の CSS コメントをサポートします/* comment */、さらにインラインコメントをサポートします// comment: