「CSSにはどのプリプロセッサ言語を使用すべきですか？」最近非常に話題の問題になっています。 私はこれについて何度も個人的に尋ねられましたが、この質問は数日おきにネット上で提起されたようです。 会話が前処理の長所と短所のトピックから、どの言語が最適かという議論に移ったのはとても楽しいことです。 原因に！
簡単に言うと：SASS。
少し詳細な答え：SASSはすべての点で優れていますが、LESSにすでに満足しているなら、これは素晴らしいことです。少なくとも、前処理を使用して人生を単純化しています。
詳細な回答：以下
Rubyとコマンドラインを使用したトレーニングスケジュール
唯一のポイントは構文です。 作成したファイルをコンパイルするには、
CodeKitなどのアプリケーションを使用する必要があります。 Rubyの基本またはコマンドラインなどを知っている必要があります。 おそらくあなたはこれを知っているべきですが、必ずしもそうではないので、これは大きな役割を果たしません。
勝者：いいえ。
CSS3を支援する
どの言語でも、独自の不純物を作成して接頭辞を使用して生活を簡素化できます。 したがって、勝者はいません。 しかし、プロジェクトでこれらのプレフィックスを更新しないようにする方法を知っていますか？ （いいえ、わかりません）。 また、ほとんどの場合、独自の不純物ファイルを更新する必要はありません。 SASSでは、
Compassを使用できます。その自動更新により、プレフィックスの問題を忘れることができます。 もちろん、ソフトウェアを更新して時々コンパイルすることもできますが、これは簡単な作業であり、サイクルを繰り返してはいけません。
つまり、すべては次のように
要約されます
。SASSにはコンパスがあります
が、LESSにはありません 。 実際、すべてが少し混乱しています。 タイプLESS for Compassのプロジェクトを作成する試みはすべて失敗しました。 事実、LESSはそれを正しく行うのに十分なほど強力な言語ではないということです。 以下でもう少し詳しく説明します。
勝者：SASS
言語能力：ロジック/サイクル
LESSでは、「保護された不純物」を作成できます。 これらの不純物は、条件が真の場合にのみ有効になります。 現在のテキストの色に依存する背景色を変更するとします。 テキストの色が「十分に明るい」場合は、おそらく暗い背景を作成する必要があります。 「十分に暗い」場合-明るい背景が必要です。 したがって、これらの「ディフェンダー」で2つの部分に分割された混合物が得られ、これらの1つだけが実行されることが保証されます。
少ない.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) { background: black; } .set-bg-color (@text-color) when (lightness(@text-color) < 50%) { background: #ccc; }
使用後、適切な背景が得られます。
少ない .box-1 { color: #BADA55; .set-bg-color(#BADA55); }
それは非常に単純ですが、その本質は明らかです。 それよりもクールなことができます。 また、LESSを使用すると、自己再帰を行うことができます。自己再帰の不純物は、更新された値で発生する可能性があります。
少ない .loop (@index) when (@index > 0) { .myclass { z-index: @index; } // Call itself .loopingClass(@index - 1); } // Stop loop .loopingClass (0) {} // Outputs stuff .loopingClass (10);
ここで、LESSのロジック/サイクルが終了します。 SASSには、関連する論理演算子と循環演算子があります。 if / then / else、forループ、whileループ、各ループ。 トリックなしで、実際のプログラミング。 SASSはかなり信頼性の高い言語であるため、Compassを使用できます。
たとえば、Compassには
background混合物があり
background 。これは、必要なものを何でも入れて、最終的に必要なものを正確に取得できるほど強力です。 コンマで区切られた画像、グラデーション、およびそれらの任意の組み合わせ-必要な結果（プレフィックスとその他すべてを含む）が得られます。
簡潔なコード：
SCSS .bam { @include background( image-url("foo.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px) ); }
このコードは、以下のモンスターになります（残念ながら、クロスブラウザの互換性のために必要です）：
CSS .bam { background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff)); background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px); background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px); }
勝者：SASS
サイト
LESSサイトはより
美しく、便利です。 これは、
SASSのドキュメントがひどいというわけではなく、かなり充実しているので、あなたの心が望むものなら何でも見つけることができます。 しかし、実践が示すように、開発者のフロントエンドは美しいインターフェースを引き付け、LESSに利点をもたらします。 間違いなく、これが大きな役割を果たし、LESSがこのゲームに勝ちます。
すべてが変わるかもしれませんが 。
勝者：少ない
@extendコンセプト
特定のスタイルセットを持つクラスを作成するとします。 次に、前のものと似ているが、いくつか追加された別のものを作成する必要があります。 LESSでは、次のように実行できます。
少ない .module-b { .module-a(); border: 1px solid red; }
本質的に、これは通常の「含める」です。 SASSでこの挿入を使用することもできますが、
@extendを使用してこれを行うことをお
@extendます。
@extendは、スタイルを
.module-aから
.module-b （ファイルを膨張させる）にコピーするだけでなく、コンパイル済みCSSの
.module-a, .module-bセレクターの名前を
.module-a, .module-bに変更します（より効率的です）方法）。
SCSS .module-a { } .module-b { @extend .module-a; }
コンパイル対象：
CSS .module-a, .module-b { } .module-b { }
見えますか？ SASSはセレクターをオーバーライドし、これはより効率的な方法です。
勝者：SASS
可変処理
LESSは@を使用し、SASSは$を使用します。 CSSでドル記号は使用されていませんが、@には使用できません。 @keyframesまたは@mediaブロックを宣言するために使用されます。 1つまたは別の特殊文字を使用することは好みの問題であると考えることができますが、SASSは基本的な概念を混同しないため、まさにここで利点があると思います。
SASSには奇妙な特性があります-「グローバル」変数「ローカル」を再定義すると、グローバル変数はその値を取ります。 ちょっと変。
SCSS $color: black; .scoped { $color: white; color: $color; } .unscoped { // LESS = black (global) // SASS = white (overwritten by local) color: $color; }
このトリックは役に立つかもしれませんが、特にJavaScriptで書いている場合は、まったく直感的ではありません。
勝者：コインを投げる必要があります:)
メディアルールの使用
私たちのほぼ全員が、
@mediaルールを使い始めて、メインスタイルページの下部にブロックを追加します。 これは機能しますが、スタイルの分離につながります。たとえば：
CSS .some-class { } @media (max-width: 800px) { .some-class { } }
SASSまたはLESSを使用して、添付ファイルを使用してこれらのスタイルを組み合わせることができます。
SCSS .some-class { @media (max-width: 800px) { } }
「応答」は非常にクールなSASSテクニックです（
Chris Eppstein 、
Ben Schwarz 、
Jeff Croftのコードを確認してください）。
SCSS =respond-to($name) @if $name == small-screen @media only screen and (min-width: 320px) @content @if $name == large-screen @media only screen and (min-width: 800px) @content
次に、それらを非常に簡潔に使用できます。
SCSS .column width: 25% +respond-to(small-screen) width: 100%
注：この手法を使用するには、まだアルファ版のSASS 3.2が必要です
gem install sass --preできます。 これが開発において本当に有用なものであることは間違いないはずだと思います。
勝者：SASS
数学
基本的に、両方の言語の数学的部分は非常に似ていますが、ユニットを処理する際にはまだいくつかの奇妙な点があります。
たとえば、LESSは最初の変数の値を測定単位として使用し、他のすべてを無視します。
少ない div { width: 100px + 2em; // == 102px (weird) }
SASSは、エラーがここに隠れていることを明確にします。
Incompatible units: 'em' and 'px' 。 もちろん、これは重要なポイントであり、より良い-間違いまたは間違った値ですが、個人的には、私は最初です。 特に、数値を使用する代わりに変数を使用する場合は、変数の追跡が非常に困難になります。
SASSを使用すると、次の更新前に表示される可能性のある「不明な」測定単位を使用して数学演算を実行できます。 LESSはこれを許可しません。 さらに奇妙な違いもあります。たとえば、SASSでの数値と単位の乗算の方法ですが、今日ではそうではありません。
勝者：SASS（ストレッチあり）
開発
記事を書いている間...
LESS
からの未解決の質問の数 ：392
SASS
の未解決の質問の数 ：84
プール要求（保留中） LESS：86
プール要求（保留中） SASS：3
先月
のコミット数 LESS：11
先月のSASS
のコミット数 ：35
これらの点のどれも、どのプロジェクトがよりアクティブであるかを確実に決定することはできませんが、SASSのような数字が多いようです。 私が理解しているように、両言語の主要な開発者は、他の新しい重要でないプロジェクトの開発の間に空き時間ができ次第、これらのプロジェクトに取り組み続けます。
勝者：おそらくSASS
読む