CSSフロントプロセッサ

CSSをある程度勉強すれば、CSS 전처리기(Preprocessor)という言葉を聞いたことがあるはずです.전처리기は、文字通り、CSSが実行される前に最初に実行されるコードである.では、なぜ전처리기を使うのでしょうか.
CSSを使うときに書きにくいと感じる理由の1つは、複雑な選択プログラムや文法かもしれません.これらの複雑な文法は作成時に不便であり,可読性も悪い.したがって、전처리기は、改善された構文(変数、セレクタネスト、重複構造など)をサポートし、CSSをより簡単に作成できます.

プリプロセッサの動作

これらのCSS 전처리기は、コードの作成時に直ちに有効になりません.Web上ではCSSだけが機能するからです.したがって、プリプロセッサを使用すると、前処理ファイルがCSSにコンパイルされて動作します.
各フロントプロセッサのコンパイル方法はやや異なり、タイプも異なります.次の記事では、コンパイル方法について説明します.
これらのプリプロセッサのタイプは、SASS(SCSS)、Less、およびStylusを含む.次に、ここで最も多く使用され、最も規模の大きいSASS(SCSS)を紹介します.

SASS/SCSS

前述したように、多くのCSSフロントプロセッサの中でSASS(SCSS)の使用率が最も高く、規模が最も大きい.また、既存のCSS構文と似ていますが、構文は簡単なので、それを理解すれば簡単に学ぶことができます.

SASS? SCSS?

でも今はずっとSASSとSCSSって言ってるでしょ?2つのプロセッサを混在させて、2つのプロセッサにどのような違いがあるのかを理解してみましょう.

SASS

まず、SASSはSyntactically Awesome Style Sheets(文法的にクールなスタイルシート)の略である.SASSスタイルシートには、.sassの拡張子があります.SASSには、次の機能があります.

変数の宣言と

の使用

import

ネストセレクタ

条件文

Mixin

継承

これらの機能に加えて、最大の違いは、括弧{}とセミコロン;がSASSで使用されないことである.ブロックをかっこではなくインデントで区切ります.
次のCSSをSASS構文に変更します.

/* .css */
a {
  color: yellow;
  background-color: black;
  border-radius: 3px;
}

a:hover {
  color: red;
}


/* .sass */
a 
  color: yellow
  background-color: black
  border-radius: 3px
  
  &:hover
    color: red

SCSS

SCSSはSassy CSS(きれいなCSS)の略です.拡張子は.scssです.SCSSはSASSを発展させた슈퍼셋(Superset)である.したがって、SCSSはSASSの文法を採用しているが、文法は既存のCSSと類似しているため、より使いやすい.さらに、多くのライブラリまたはフレームワークは、SASSと比較してSCSS構文を採用している.ですから、これからはSCSSしか言及しませんが、SCSSの文法をベースにしています.SCSSとSASSを区別する最大の違いは、括弧とセミコロンがSCSSにあることである.上記で作成した.sassファイルを.scss形式に変更しましょう.

a {
  color: yellow;
  background-color: black;
  border-radius: 3px;
  
  &:hover {
    color: red;
  }
}

個人的には大かっことセミコロンのSCSSがあるのは確かに便利だと思います.
この文章では、SCSSについて理解しました.次の記事では、SCSSを正式に使用する方法について説明します.