SASSとSCSSの違いは何ですか？

SASSおよびSCSS：どのプリプロセッサを選択しますか？

コアポイント

• SASSとSCSはどちらもCSSにコンパイルされたプリプロセッサスクリプト言語ですが、構文は異なります。 SASSはインデントの構文を使用し、SCSSはCSS様の構文を使用します。これは、SASSにはセミコロンやブラケットを必要としないことを意味しますが、SCSSはブラケットを使用してコードブロックを表し、セミコロンを使用してブロック内の線を分離します。
• SASSとSCSの選択は、個人的な好みとプロジェクトのニーズに依存します。ただし、SCSSには同様の構文があるため、SCSSは初心者やすでにCSSに精通している人にとっては簡単に開始できます。また、既存のツール、プラグイン、デモとの互換性があり、多くの開発者にとってより便利なオプションになります。
• SASSとSCSSはどちらも、変数、ネスティング、混合物、継承など、通常のCSSには見られない高度な機能を提供します。ただし、両方を使用するには、ビルドプロセスの複雑さが向上する可能性があります。

この記事は、2014年4月28日にリリースされた記事の更新バージョン

です。

私はSASSについて多くのことを書きましたが、私が受け取ったコメントのいくつかは、SASSが何を参照しているかを誰もが正確に知っているわけではないことを明確に示しています。いくつかの明確化を次に示します。 sass について話すとき、通常、前処理者と言語全体を参照します。たとえば、「私たちはSASSを使用しています」または「これはSASSミックスインです」と言います。一方、SASS（Preprocessor）は、2つの異なる構文を許可します：

• sass、インデンテーションの構文
• scss、css
に似た構文

SASSの歴史

当初、SASSは、Ruby開発者によって設計および書かれたHamlと呼ばれる別のプリプロセッサの一部でした。したがって、SASS StyleSheetは、ブレース、セミコロン、厳密なインデントのないRubyのような構文を次のように使用しています。

<code>// 变量
!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)</code>

ご覧のとおり、これは通常のCSSと比較して大きな違いです！あなたがSASSユーザーであっても、これは私たちが慣れているものとは異なることがわかります。可変シンボルは$の代わりに、割り当てシンボルは=ではありません。とても奇妙です。しかし、それは2010年5月にバージョン3.0がリリースされる前にSASSの様子であり、SCSSと呼ばれる新しい構文を

sassy CSSを導入しました。この構文は、ユーザーフレンドリーなCSS構文を導入することにより、SASSとCSSの間のギャップを狭めることを目的としています。

<code>// 变量
$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);
}</code>

SCSSはSASSよりもCSSに近い。つまり、SASSメンテナーは、Indent Syntaxから$および：in scssに移動することにより、2つの構文を互いに近づけるよう努めています。これで、新しいプロジェクトを開始するときは、どの構文を使用するかを知りたい場合があります。パスに光を当てて、各構文の長所と短所を説明させてください。

SASSインデンテーションの構文の利点

この構文は奇妙に思えるかもしれませんが、いくつかの興味深い点があります。まず、より短く、入力が簡単です。これ以上ブレースとセミコロンは必要ありません。これらすべてのものは必要ありません。より良い！ @mixinまたは@includeは、単一の文字で十分な場合は必要ありません。さらに、SASS構文は、インデントに依存することにより、クリーンなコーディング標準を強制します。間違ったインデンテーションは.sass styleSheet全体を破損する可能性が高いため、コードが常にきれいで整形されていることを保証します。 SASSコードを書く方法は1つしかありません。良い方法です。しかし、注意してください！ SASSのくぼみは、何かを意味します

。セレクターをインデントするとき、これは以前のセレクターにネストされることを意味します。たとえば、

…次のCSSが出力されます：

<code>// 变量
!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)</code>

.element-bの1つのレベルを右に押す単純な事実は、それが.element-aの子であることを意味し、生成されたCSSを変更します。あなたのインデントを非常に注意してください

<code>// 变量
$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);
}</code>

ちなみに、インデントベースの構文は、PHP/JavaチームよりもRuby/Pythonチームにとってより適している可能性があると感じています（これは議論の余地がありますが、反対のことを聞きたいです）。

SCSS構文の利点

初心者の場合、CSSに完全に準拠しています。これは、CSSファイルの名前を.scssに変更できるため、適切に機能します。 SCSSを完全に互換性のあるものにすることは、そのリリース以来、SASSメンテナーにとって最優先事項であり、私の意見では、それは大したことです。さらに、彼らは、将来有効なCSS構文になる可能性のある構文に固執しようとします（したがって @ディレクティブ）。 SCSSはCSSと互換性があるため、これは学習曲線がほとんどないことを意味します。構文は既に知られています。結局のところ、それは少量の追加コンテンツを持つCSSだけです。これは、経験の浅い開発者と協力する場合に重要です。彼らは、SASSについて何も知らずにコーディングをすばやく開始できるようになります。また、実際に理にかなっているので読みやすいです。 @mixinを読むと、@includeがミックスを呼んでいることがわかります。ショートカットは使用せず、声を出して読むとすべてが理にかなっています。さらに、ほとんどの既存のSASSツール、プラグイン、およびデモは、SCSS構文を使用して開発されています。時間が経つにつれて、この構文はますます重要になり、主に上記の理由でデフォルトの選択肢になります。

最終的な考え

オプションはあなた次第ですが、インデント構文を使用してエンコードする正当な理由がない限り、SASSの代わりにSCSを使用することを強くお勧めします。より簡単であるだけでなく、より便利です。私は自分でインデンテーションの構文を試してみましたが、それが好きでした。私はそれがどれほど短くて簡単かが好きです。最後の瞬間に考えを変える前に、実際にコードベース全体を職場でSASSに移動することを計画しています。インデントの構文を使用する場合、いくつかのツールを操作することが非常に困難であるため、この動きを妨げた過去の自己に感謝しています。また、ノートsassは、言語や文法について話しているかどうかにかかわらず、大文字を使用することはありません。一方、 scss は常に大文字を使用します。リマインダーが必要ですか？ sassnotsass.comはあなたを助けることができます！

SASSおよびSCSS

に関する

FAQ

SASSとSCSの主な違いは何ですか？

SASS（同義語スタイルシート）とSCSS（生意気なCSS）は、どちらもカス​​ケードスタイルシート（CSS）として解釈される前処理器スクリプト言語です。 2つの主な違いは構文です。 SASSは、インデントベースの構文に従います。つまり、セミコロンやブラケットは必要ありません。一方、SCSSはCSSと同様の構文に従います。ブラケットを使用してコードブロックを表し、セミコロンを使用してブロック内の線を分離します。

SASSをSCSに変換できますか？

はい、SASSをSCSに変換することができ、その逆も同様です。コードをある構文から別の構文に変換するのに役立ついくつかのオンラインツールがあります。ただし、変換プロセス中に、構文の違いにより一部の関数が直接変換されない場合があることに注意する必要があります。

SASSまたはSCSを学ぶ方が簡単ですか？

それは、あなたがCSSにどれほど馴染みがあるかに大きく依存します。すでにCSSに精通している場合、SCSはその構文が非常に似ているため、学習しやすいと感じるかもしれません。ただし、CSSに慣れていない場合は、SASSのインデントベースの構文がよりシンプルで直感的であることがわかります。

同じプロジェクトでSASSとSCSを使用できますか？

技術的には、同じプロジェクトでSASSとSCSを使用できます。ただし、一貫性と読みやすさを確保するために、構文に固執することをお勧めします。構文を混合すると、混乱を引き起こし、コードを維持しにくくする可能性があります。

通常のCSSよりもSASSまたはSCSを使用することの利点は何ですか？

SASSとSCSSはどちらも、変数、ネスト、ミックス、継承など、通常のCSSでは利用できない機能を提供します。これらの機能により、スタイルシートが読みやすくなり、CSSを書くのに時間と労力を節約できます。

scssはCSSと同じですか？

SCSSは構文の観点からCSSに似ていますが、同じではありません。 SCSSは、変数、ネスティング、混合物、継承などのCSSに強力な機能を追加する前処理言語です。これらの機能は、通常のCSSでは使用できません。

はい、SASSまたはSCSをCSSに変換するコンパイラが必要です。この目的のために、ノードサス、ダートサス、ルビーサスなど、多くのツールが利用可能です。これらのツールをビルドプロセスに統合して、SASSまたはSCSSファイルをCSSに自動的にコンパイルできます。

CSSフレームワークでSASSまたはSCSを使用できますか？

はい、CSSフレームワークを使用してSASSまたはSCSを使用できます。 BootstrapやFoundationなどの多くの人気のあるCSSフレームワークは、SASSまたはSCSSバージョンのスタイルシートのバージョンを提供して、カスタマイズを容易にします。

SASSまたはSCSを使用することの欠点はありますか？

SASSまたはSCSSを使用することの潜在的な欠点は、編集手順の必要性です。これにより、ビルドプロセスに複雑さが追加される場合があり、追加のツールとセットアップが必要になる場合があります。ただし、読みやすさや保守性の向上など、SASSまたはSCSを使用することの利点は、この不利な点を上回ることがよくあります。

SASSまたはSCSはより人気がありますか？

SASSとSCSはどちらも広く使用されていますが、SCSSはおそらくCSSに類似しているため、より人気があるようです。ただし、SASSとSCSの選択は通常、個人的な好みとプロジェクトの特定のニーズに依存します。

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