sass と scss の違いは何ですか

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

このチュートリアルの動作環境: 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 は中括弧 ({}) やセミコロン (;) を使用しない厳密なインデント文法規則で記述されていますが、SCSS 文法の記述方法は CSS 文法の記述方法と同じです。非常に似ています。 。

• #以下はコンパイル ルールの概要です:

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

上記の紹介に加えて、sass は加算/減算、乗算、除算も実行できます。 、変数計算、数値演算、文字演算、色の演算など。

(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がsass と scss の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。