Sassとは？

[結論]

• Sassとは？

→ SassとはCSSの機能を拡張した言語です。

• Sassを利用すると？

→ CSSを効率的に書けるようになる

→ CSSを簡潔に書ける

→ CSSの中で変数を使える

→ CSSの中で計算を行うことなどができる

• SassはCSSに非常に似ている

→しかし、違う言語である

• Sassは通常のCSSファイルには記述することができない

→ 反対にSassファイルにCSSを記述することはできる

[目次]

• Sassについて
• 概要
• 実装例
• 使用するシチュエーション
• 参考にしたサイト

[本題]

Sassについて

〜や〜を利用していると目にする機会があると思います。
今回はSassについて解説します。

概要

Sass（言語）を扱うファイルの拡張子は２種類ある

1. .sass
2. .scss

何が違うのか？

.sass拡張子

.sass拡張子の場合
• 波カッコの省略やセミコロンが不要
• モダンで非常にシンプルな記法

→しかしその分CSSとの差が大きく普及しなかった

.scss拡張子

.scss拡張子の場合, → .sassの後に作られたSassファイルが.scssの拡張子
• CSSに非常に似た記法（SCSS記法） である
• 今ではこちらの記法が主流になっている

何ができる？

記述の簡略化ができる

1. 親子関係にあるセレクタを入れ子にして書くことができる
2. CSSの場合→親の要素から対象要素までのセレクタを何度も書く必要がある
3. Sassはネストさせることで、同じ親のセレクタをまとめることができる

実装例

Sassのネスト構造

• SassではCSSをネスト(入れ子)して記述することができます。

使用するシチュエーション

参考にしたサイト