Sass と SCSS の関係は何ですか? _html/css_WEB-ITnose

私は最近 Sass コードをたくさん書いていますが、誰もが Sass が何であるかを知っているわけではないことに最近気づきました。ここで簡単に説明します:

Sass について話すとき、私たちは 2 つのことを意味することがよくあります: CSS プリプロセッサと言語です。私たちはよく「Sass を使っています」「これは Sass mixin です」などと言います。同時に、Sass (プリプロセッサ) には 2 つの異なる構文があります:

• Sass、インデント構文

• SCSS、CSS のような構文

History

ハムルの、Ruby 開発者によって設計および開発されたプリプロセッサ。このため、Sass は次のような Ruby のような構文を使用し、中括弧やセミコロンは使用せず、厳密なインデントを使用します。

// Variable!primary-color= hotpink// Mixin=border-radius(!radius)    -webkit-border-radius= !radius    -moz-border-radius= !radius    border-radius= !radius.my-element    color= !primary-color    width= 100%    overflow= hidden.my-other-element    +border-radius(5px)

これが CSS コードとは大きく異なることがすぐにわかります。あなたが Sass (プリプロセッサ) ユーザーであっても、これが自分が使用しているものとは大きく異なることがわかるでしょう。変数は $ の代わりに ! でマークされ、代入演算子は : の代わりに = になります。とても奇妙だ。

しかし、2010 年 5 月以前は、Sass はこんな感じでした。 2010 年 5 月に、公式は SCSS (Sassy CSS を意味する) と呼ばれる新しい構文を発表しました。この構文は、Sass と CSS の間のギャップを埋めることを試みる CSS フレンドリーな構文をもたらします。

// Variable$primary-color: hotpink;// Mixin@mixin border-radius($radius) {    -webkit-border-radius: $radius;    -moz-border-radius: $radius;    border-radius: $radius;}.my-element {    color: $primary-color;    width: 100%;    overflow: hidden;}.my-other-element {    @include border-radius(5px);}

SCSS は Sass よりも CSS 構文に近いです。言い換えれば、Sass のメンテナは、インデント構文の ! と = を SCSS の $ と : に置き換えるために多くの作業を行ってきました。

さて、新しいプロジェクトを開始するとき、どの構文を使用すればよいか迷うかもしれません。両方の構文の長所と短所を見てみましょう。

Sass インデント構文の長所と短所

構文は奇妙に見えますが、インデント構文には興味深い点がたくさんあります。まず、短くて書きやすいです。中括弧やセミコロンなどは必要ありません。さらに良いことに、@mixin や @include も必要なく、= と + の 1 文字で十分です。

また、Sass は厳密なインデントを通じて クリーンなコーディング標準 を強制します。 1 つのインデントが間違っていると .sass ファイル全体が破壊される可能性があるため、これによりコード全体が常にクリーンで適切にフォーマットされた状態になります。 Sass コードを記述する方法は 1 つだけです。それは正しい方法です。

でも気をつけてください！ Sass ではインデントが意味を持ちます。要素をインデントすると、それは前の要素の子になることを意味します。例:

.element-a    color: hotpink    .element-b        float: left

上記は次の CSS コードを出力します:

.element-a {    color: hotpink;}.element-a .element-b {    float: left;}

.element-b を右に 1 スペース移動して .element-a の子要素にし、CSS コードの出力結果を変更します。したがって、コードのインデントには注意してください。

さらに、インデントベースの構文は Ruby/Python チームには適していますが、PHP/Java チームには適していないと思います。 (これには議論の余地があり、さまざまな声も聞きたいです)

SCSS 構文の長所と短所

初心者にとって、SCSS は CSS と完全な互換性があるため、学習曲線はほぼゼロです。 SCSS 構文は、CSS にいくつかの機能が追加されたものです。これは、経験の浅い開発者と作業する場合に重要です。開発者は、最初に Sass を学習しなくても、すぐにコーディングを開始できます。

さらに、SCSS は記号的ではなく意味論的であるため、読みやすい。 @mixin を読むと、それがミックスイン宣言であることがわかります。@include を見ると、ミックスインを参照していることがわかります。彼は略語を一切使用しておらず、声に出して読むとすべてが非常に明瞭でした。

また、現在、ほぼすべての Sass ツール、プラグイン、デモは SCSS 構文に基づいて開発されています。時間が経つにつれて、SCSS は誰もが好む選択肢になるでしょう。たとえば、現在 Sass インデント構文強調表示プラグインを見つけるのは難しく、通常は SCSS プラグインしか利用できません。

まとめ

選択はあなた次第ですが、インデントされた構文を使用する正当な理由がない限り、SCSS を使用することを強くお勧めします。シンプルなだけではなく、便利でもあります。

最後に、文法を指す場合でも言語を指す場合でも、Sass は決して大文字にならないことに注意してください。また、SCSS は常に大文字で表記されます。このことを思い出させるための専用の Web サイトもあります。

Sass と SCSS の違いは何ですか? からの翻訳です。