CSSプリプロセッサとSassとLESSの比較

ほんの数例を挙げると、CSSプリプロセッサ、LESS、Sass、Stylus、およびSwith CSSがいくつかあります。. CSSプリプロセッサ, 前にも述べたように、これは主にCSSのオーサリングをより動的に、組織的にそして生産的にすることを目的としています。しかし, 問題は、それらのうちどれが最もうまくいくかです。?

もちろん、それらすべてを見ているわけではありません。代わりに、最も人気のあるものを2つだけ比較します。 セスとレス. 決定するために、7つの要因のうち2つを比較します。同点の場合は、両方に1ポイントが与えられます.

さぁ、始めよう.

インストール

非常に基本的なステップから始めましょう, インストール. SassとLESSはどちらも異なるプラットフォーム上に構築されており、SassはRuby上で実行されていますが、LESSはJavaScriptライブラリです。 だった 実際にもRuby上に構築されています 最初は）.

Sass： Sassが動作するためにはRubyが必要です。Macではこれがプレインストールされていますが、WindowsではSassを使い始める前にインストールする必要があるでしょう。さらに、Sassはターミナルまたはコマンドプロンプトからインストールする必要があります。あなたが代わりに使うことができるいくつかのGUIアプリケーションがありますが、それらは無料ではありません.

もっと少なく： LESSはJavaScriptに基づいて構築されているので、LESSのインストールはJavaScriptライブラリをHTMLドキュメントにリンクするのと同じくらい簡単です。 LESSをCSSにコンパイルするのに役立ついくつかのGUIアプリケーションもあり、それらのほとんどは無料で非常によく機能しています（例えばWinLessおよびLESS.app）。.

結論：LESSが明らかにリードしている.

拡張機能

SassとLESSの両方とも、より速くより簡単なWeb開発のための拡張を持っています.

Sass：前回の投稿で、現在および人気のあるSassベースの拡張であるCompassについて説明しました。コンパスには、短時間でCSS3構文を書くためのMixinがいくつかあります。.

しかし、コンパスは単にCSS3ミックスインを超えて、ヘルパー、レイアウト、タイポグラフィ、グリッドレイアウト、そしてスプライト画像のような他の非常に便利な機能を追加しました。それはまた持っています config.rb CSSの出力やその他の設定を制御できるファイルです。つまり、要するに、コンパスはSassでWeb開発を行うためのオールインワンパッケージです。.

もっと少なくLESSにもいくつかの拡張機能がありますが、必要なものがすべて1か所にまとめられているCompassとは異なり、それらは別々の開発者によって構築されています。これは熟練したユーザーにとっては問題にならないでしょうが、LESSを始めたばかりのユーザーにとっては、ワークフローに合った適切な拡張子を選択するために時間がかかる必要があります。.

あなたのプロジェクトに含める必要があるかもしれないいくつかのLESS拡張があります：

CSS3ミックスイン：LESS Elements、Preboot、LESSミックスイン.
グリッド：960.gs、フレームなし、Semantic.gs
レイアウト：少ないも
その他の：Twitterのブートストラップ

結論：SassとCompassは素晴らしいデュオであり、Spriteの画像機能は本当にキックなので、ここでSassのポイントが1つあります。.

言語

すべてのCSSプリプロセッサには独自の言語があり、それらはほとんど一般的です。たとえば、SassとLESSはどちらも変数を持っていますが、Sassが変数を次のように定義する場合を除いて、大きな違いはありません。 $ LESSが @ 符号。彼らはまだ同じことをします： 定数値を格納する.

以下では、SassとLESSの両方で最も一般的に使用されている言語のいくつかを調べます（私の経験に基づく）。.

ネスティング

ネスティングルールはセレクタを繰り返し書くことを避けるための良い習慣であり、SassとLESSの両方はネスティングルールで同じ方法を持っています。

Sass / ScssとLESS

 nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 ul パディング：0;マージン：0。

しかし、Sass / Scssでは、個々のプロパティもネストできるようにすることで、このメソッドをさらに一歩進めています。次に例を示します。

 nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 ul パディング：0;マージン：0。ボーダー：スタイル：ソリッド。左：幅：4ピクセル;カラー：＃333333。右：幅：2ピクセル;色：＃000000;

このコードは以下の出力を生成します。.

 nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。ボーダースタイル：ソリッド。ボーダー左幅：4ピクセル。左ボーダー色：＃333333。右横幅：2ピクセル。右ボーダー色：＃000000;  nav ul パディング：0;マージン：0。

結論：個々のプロパティを入れ子にすることは良い追加であり、考慮されています ベストプラクティス, 特に、私たちがDRY（自分自身を繰り返さない）の原則に従っている場合。だから、私はそれがどれがこのケースで良くやっているのは明らかであると思います.

ミックスインとセレクタの継承

SassとLESSのミックスインの定義は少し異なります。 Sassでは、@混入します LESSでは、ディレクティブはクラスセレクタで定義します。これが一例です。

Sass / Scss

 @mixin border-radius（$ values）境界半径：$値;  nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 @include border-radius（10px）;

もっと少なく

 .border（@radius）border-radius：@radius;  nav margin：50px auto 0;幅：788ピクセル。高さ：45ピクセル。 。ボーダー（10ピクセル）;

SassとLESSのミックスインは、 含める あるルールセットから別のルールセットへのプロパティ。 Sassでは、この方法は セレクタの継承. 概念は同じですが、Sassはプロパティ全体をコピーするのではなく、同じプロパティと値を持つセレクタを拡張するかグループ化します。 @extend 指令.

以下の例を見てください。

 .円ボーダー：1ピクセルソリッド#ccc;ボーダー半径：50ピクセル。オーバーフロー：隠れています。  .avatar @extend .circle;

このコードは次のようになります。

 .サークル、.avatar border：1px solid #ccc;ボーダー半径：50ピクセル。オーバーフロー：隠れています。

結論：Sassは異なるMixinとSelectorsの継承により一歩前進しました.

オペレーション

SassとLESSはどちらも基本的な数学演算を実行できますが、異なる結果を返すことがあります。彼らがこのランダムな計算をどのように実行するか見てください：

Sass / Scss

 $マージン：10px。 div margin：$ margin  -  10％; / *構文エラー：互換性のない単位： '％'と 'px' * /

もっと少なく

 @マージン：10px。 div margin：@margin  -  10％; / * = 0px * /

結論Sassは、この場合、もっと正確にやっています。％とpxは等価ではないので、エラーを返すはずです。しかし、私は実際にそれがのようなものになることを願っています 10px - 10％= 9px.

エラー通知

エラー通知は、私たちが何をしているのかを知るために重要です。数千行のコードと、混乱のどこかにあるわずかなエラーを想像してください。はっきりしている エラー通知 問題を迅速に把握するための最良の方法となります.

Sass：この例では、コマンドプロンプトを使ってコンパイラを実行しています。コードに無効があると、Sassはエラー通知を生成します。この場合、6行目のセミコロンを1つ削除します。これでエラーになります。下のスクリーンショットを見てください.

この通知を最初に見たときには、ほとんどわかりませんでした。また、Sassはエラーの場所とは少しずれているようです。エラーがオンになっているという 7行目, 6の代わりに.

もっと少なく：同じエラーのシナリオでは、LESS通知はよりよく提示されており、またより正確であるように見えます。このスクリーンショットを見てください。

結論： LESSはこの問題に関してより良い経験を提供し、そして手を勝ち取ります.

ドキュメンテーション

文書化はすべての製品にとって非常に重要な部分です。熟練した開発者でさえもしなければ物事を進めるのは難しいと思うでしょう ドキュメンテーション.

Sass：公式サイトでドキュメントを調べてみると、個人的には、私は図書館の真ん中にいるような気がしますが、ドキュメントは非常に包括的です。それでも、それがあなたにとって重要であるならば、ルックアンドフィールは読書の動機づけではありません、そして、背景は無地の白です.

プレゼンテーションは、W3のドキュメントやWikiPediaによく似ています。これがインターネットでドキュメントを表示する標準かどうかはわかりませんが、それが唯一の方法ではありません.

もっと少なく一方、LESSのドキュメントは、テキストによる説明が多すぎることなく明確になっています。また、例に直接触れています。それはまた良いタイポグラフィとより良い配色を持っています。私がLESSがそもそも私の注意を引いたのはこのためだと思いますし、文書のレイアウトと表示のおかげで早く学ぶことができます。.

結論Sassはもっと包括的なドキュメントを持っていますが、LESSドキュメントのプレゼンテーションはより良いです、それで私たちはこれをタイと呼ぶことができると思います.

最終的な考え

私はそれが明確な結論だと思います Sassが優れています の合計スコアで 5対3 LESSのために。しかし、LESSが悪いという意味ではありません。彼らはただ良くなる必要があります。結局のところ、それは彼らの選択のプリプロセッサを選ぶというエンドユーザーの決定次第です。 SassであろうとLESSであろうと、快適で生産的であれば、それが彼らのリストの勝者です。.

最後に、この問題について何か気になっている場合は、下のコメントボックスで気軽に共有してください。.