sass、scss、およびcssの関係

965 ワード

cssといえば、cssスタイルがページ構造を修飾するために使われていることはよく知られていると思います.ではsass、scssは何をしているのでしょうか.次に私たちは一緒に理解してみましょう.
css、sacc、scssの関係を理解するには、cssプリプロセッサから始めます.
cssプリプロセッサとは?cssプリプロセッサは、専用の言語でウェブページのスタイル設計を行い、その後、プロジェクトで使用するために正常なcssファイルにコンパイルされます.
css前処理言語を使用する利点:cssがより簡潔で、修正が容易で、可読性が強く、新しい強さに適応し、コードのメンテナンスが容易であることです.
cssとsassの関係:
sassはbuby言語で記述されたcss前処理言語であり、htmlと同様に厳格なインデントスタイルがあり、css記述規範と大きく異なり、カッコやセミコロンを使用しないため広く受け入れられない.
sassとscssの関係:
sassとscssは実は同じcss前処理言語で、その接尾辞名はそれぞれ.sassと.scssの2種類です.
SASSバージョン3.0より前の接尾辞は.sassであり、バージョン3.0より後の接尾辞は.scssである.
両者は異なり、sassに続いてscssの記述規範は基本的にcssと一致し、sass時代には厳格なインデント規範があり、「{}」と「;」がなかった.scssはcssの仕様と一致している.
サンプルコード:
sass
#sidebar
  width: 30%
  background-color: #faa

scss
#sidebar {
  width: 30%;
  background-color: #faa;
}

SCSSとCSSの書き方に差はありません:
SCSSとCSSの書き方に差がないのも、Sassがその後ますます人気を集めている理由の一つです.簡単に言えば、既存の「.css」ファイルを直接「.scss」に変更すれば使用できます.