Zenn
😊

[Sass]Sassとは？①概念と記法、使用メリット

2023/03/28に公開1件
CSS
HTML
Sass
Scss
tech

今回のPFを作成するにあたり、レイアウトの設計にsassを学びながら使用しました。
ので、今日はsassについてまとめていきたいと思う。

sassとは

Syntactically Awesome StyleSheetの略。(直訳：　"構文的にすごいスタイルシート")
CSS(シーエスエス)の拡張言語であり、
CSSをより簡潔に書くことができるCSSプリプロセッサーの一種。
CSSの記述を簡単にし、スタイルの効率化や処理の自動化を実現することができる!!!

Sass自体はCSSプリプロセッサーであり、Sass記法はCSSのメタ言語として機能することができる.

= Sassは、CSSの記述を拡張するメタ言語としての側面と、プリプロセッサーとしての側面の両方を持っている。

※上記理由により、"メタ言語"と、"プリプロセッサー"は異なるものではあるが、
混在して表現されることがある。

CSSと同じ構文を使って書くことができるが、相違点として、
変数やネスト、mixinと呼ばれる再利用可能なスタイルのまとめ方など、CSSにない機能を提供する。

プリプロセッサー?? プリプロセッサーの役割は？

”プログラミング言語において、プログラムのコードを読み取り、変換したり、拡張したり、コンパイルの前に必要な手順を実行するプログラム”をプリプロセッサーという。

プリプロセッサーは、主に以下のような目的で使用される。

  • コードの再利用性を高めるためのマクロ機能の提供
  • コードの保守性を向上させるための条件付きコンパイル機能の提供
  • コンパイル時に定数の値を変更するための定数定義機能の提供
  • コードの拡張性を高めるためのインクルード機能の提供

記法：　SCSSとSASS

sassには、SCSS記法とSASS記法の2種類がある。

sass記法

  • .sass拡張子を使用し、インデントで要素の階層を表現する。セミコロンや中括弧は不要です。
    ex. Sass記法で書かれたCSSの例:
nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
    a
      display: block
      padding: 6px 12px
  • "Sass"と"Sass記法"は同じ意味です

scss記法：　SCSS（Sassy CSS）

  • .scss拡張子を使用し、CSSと同じように中括弧やセミコロンを使用。インデントはオプション。
    ex. SCSS記法で書かれたCSSの例:
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
    a {
      display: block;
      padding: 6px 12px;
    }
  }
}
  • "SCSS"はSassの拡張機能の1つであり、Sass記法に似たCSSライクな構文を提供する。
  • SCSSは、Sass記法よりもCSSに近い文法で書かれたSassコードを作成するのに適している!

cssからsass,scssの移行

  • CSSの拡張機能としてSassが2006年登場。CSSをより便利に書くことができるようになった。

  • Sassはモジュール化や再利用性を向上させることができ、CSSの開発効率を向上させることができる。
    => 最初は、独自の構文を持っていたため、CSS開発者には取り入れにくい部分がありました。
    = そこで、CSSライクなシンタックスを提供するSCSSが導入!!!!!!

  • SCSSには、CSSにない多くの機能(変数や関数、ネストなど、CSSの書き方を改善するための機能)が多数ある。

Sassは、より便利で高機能なCSSの拡張機能であり、SCSSを使うことで、より簡単にCSSを書くことができ流ようになった！

Sassを使用する主なメリット

1. ネスト構造による可読性の向上
Sassでは、セレクタをネストすることができます。
これにより、HTMLの構造と同様のネスト構造でスタイルを定義することができ、可読性が向上します。

2. 変数やミックスインの利用
Sassでは、変数やミックスインを使用することができます。
変数を使うことで、同じ値を複数の場所で使用する際に、変数名だけを変更するだけで簡単に変更することができます。
また、ミックスインを使うことで、再利用可能なスタイルの定義を簡単に行うことができます。

3. 継承によるスタイルの効率化
Sassでは、スタイルの継承を使用することができます。
これにより、共通するスタイルをまとめて定義し、そのスタイルを継承することで、スタイルの重複を減らすことができます。

4. 処理の自動化
Sassは、CSSを生成するためのプリプロセッサであり、
変換ツールを使用することで、自動化することができます。
例えば、ファイルの監視を行い、ファイルが変更された場合に自動的にCSSファイルを生成することができます。

Discussion