Sassとは?

[結論]

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

  • Sassを利用すると?
  • CSSを効率的に書けるようになる

    CSSを簡潔に書ける

    CSSの中で変数を使える

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

  • SassはCSSに非常に似ている
  • →しかし、違う言語である

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

[目次]

[本題]

Sassについて

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

概要

  • Sass(言語)を扱うファイルの拡張子は2種類ある
    1. .sass
    2. .scss

    何が違うのか?

    .sass拡張子

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

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

    .scss拡張子

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

    何ができる?

    記述の簡略化ができる

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

    実装例

    Sassのネスト構造

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

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

    参考にしたサイト