sass と scss の違いは何ですか-フロントエンドQ&A-php.cn

sass と scss の違いは何ですか

青灯夜游

リリース： 2021-12-29 14:05:26

オリジナル

17665 人が閲覧しました

違い: 1. Sass は拡張子として「.sass」接尾辞を使用しますが、SCSS は拡張子として「.scss」接尾辞を使用します; 2. Sass は厳密なインデント文法規則に従って書かれています。中括弧 "{ はありません。 }" とセミコロン ";"、SCSS の構文は、中括弧とセミコロンを含む CSS の構文と非常によく似ています。

sass と scss の違いは何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

Sass とは

Sass は CSS よりも上位のメタ言語で、ファイルスタイルを明確かつ構造的に記述するために使用でき、CSS よりも強力です。通常の CSS より強力な機能。 Sass は、よりクリーンで洗練された構文を提供すると同時に、保守しやすく管理しやすいスタイルシートを作成するためのさまざまな機能を提供します。

Sass は Ruby 言語で書かれた CSS 前処理言語で、2007 年に誕生し、最大の成熟した CSS 前処理言語です。元々は HAML (インデント付き HTML プリコンパイラー) で動作するように設計されていたため、HTML と同じインデントスタイルを持ちます。 SASS は、ルールのネスト、変数、ミックスイン、セレクターの継承などを追加する CSS3 の拡張機能です。コマンドラインツールまたは WEB フレームワークプラグインを使用して、標準の整形式の CSS コードに変換します。

Sass 公式 Web サイト: http://sass-lang.com

Scss とは

Scss は、新しい構文を導入した Sass 3 です。 Sassy CSS の略語は CSS3 構文のスーパーセットであり、すべての有効な CSS3 スタイルが Sass にも適していることを意味します。端的に言えば、Scss は Sass のアップグレード版であり、その構文は CSS3 と完全に互換性があり、Sass の強力な機能を継承しています。つまり、標準の CSS3 スタイルシートはすべて、同じセマンティクスを持つ有効な SCSS ファイルです。さらに、SCSS は、ほとんどの CSS ハック (一部の CSS トリック) や、古い IE フィルター構文などのブラウザー固有の構文も認識できます。

Scss は CSS の拡張機能であるため、CSS で適切に動作するコードはすべて Scss でも適切に動作します。言い換えれば、Sass ユーザーの場合、Scss を完全に理解するには、Sass 拡張機能がどのように機能するかを理解するだけで済みます。変数、親参照、ディレクティブなどのほとんどの拡張機能は同じですが、唯一の違いは、SCSS では改行やインデントの代わりにセミコロンや中括弧が必要であることです。

sass と scss の違い

Sass と SCSS は実際には同じもので、通常は Sass と呼ばれています。この 2 つの違いは次のとおりです。

#ファイル拡張子は異なります。Sass は拡張子として「.sass」接尾辞を使用しますが、SCSS は拡張子として「.scss」接尾辞を使用します
#以下はコンパイルルールの概要です:

sass<span style="font-size: 18px;">Compilation</span> 1. Sass のコンパイル方法:

コマンドのコンパイル

GUI ツールのコンパイル
注:

「単一ファイルのコンパイル」

および
「複数ファイルのコンパイル」。
2. Sass 出力メソッド:

出力メソッドコンパイル時にパラメータを運ぶ参考図sass ネストされた出力メソッドnestedsass 拡張出力メソッドexpandedsass 展開された出力メソッド compact Sass展開出力方法compressedスクリーンショットの比較:


`sass --watch test.scss : test.css` --style ネストされた	`図 1`
`sass --watch test.scss:test.css` --style Expanded	`図 2`
`sass --watch test.scss:test.css` --style Compact	`図 3`
`sass --watch test.scss:test.css` -style COMPLEX	`図 4`