LESSとSASSの違いの概要

昨日、 LESSと私たちが使用しているSASS / SCSSとの違いの詳細な調査に半日費やしました。



SASS構文は、その簡潔さからSCSSよりも魅力的です。 しかし、SASSのスタイルの大規模なネストは、その簡潔さのすべての利点を迅速に排除できます。 いずれにしても、SASSとSCSSの違いは基本的なものではありません。 LESSはSASSよりもSCSSに近いです。 そして、一般的に、これは同じです。 多くの違いはありませんが、それらのいくつかは根本的に力のバランスを変えます。







1. LESS-JSを使用してクライアント側で実行できます。





より正確には、それができるということではなく、このために設計されています。 LESSコードを使用した一般的なプラクティス:



 <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
      
      







その後、サーバー上でコンパイルする機能(jsとrubyの両方)が彼にねじ込まれました。



一見、奇妙な特性。 サーバーで完全にコンパイルし、SASSで慣れている既製の縮小されたCSSをレンダリングできる場合、なぜクライアント側でコンパイルしますか?



その理由は、LESSドキュメンテーションの最も普通に見える行を調べた後に明らかになります



@height: `document.body.clientHeight`;







これは、スタイルの開発が始まって以来、コーダーが夢見ていた機会を提供する小さな孤独なラインです。 CSSからクライアント側のJavaスクリプトを呼び出し、スタイルを作成するときに実際のブラウザー設定を考慮します。



つまり、最初にDOMをロードし、次にクライアント側で直接DOM用の特別なCSSを作成する機会があります。 次に、これがどのような機会を開くかを自分で考えてください。



これがプロジェクトに必要かどうかは別の問題です。 誰もがクライアントの不確実性/独立性と組版に慣れていることは明らかです。 しかし、これはそのような機会があることを忘れてはならない理由ではありません。たとえば、非常にラバーなレイアウトでそれを行うことができます。



2. SASS / SCSSとは異なり、LESSにはロジックがありません。





LESSにはif / then、forなどはありません。 JSが簡単に埋め込まれているという事実を考えると、ロジックを固定することはかなり可能だと思います。 試したことがありません。



3. LESSでは、クラスの混合+混合が簡単です。





LESSでは、定義に他のクラスのプロパティを含めることができるという事実が本当に気に入りました。 クラス自体はミックスインです。 これは、SASS / SCSSにはない別の機能です。 通常のCSSファイルをLESSに含め、そのクラスを使用してプロパティを定義できます。 例:



.wrap {

text-wrap: wrap;

white-space: pre-wrap;

white-space: -moz-pre-wrap;

word-wrap: break-word;

}

pre { .wrap }









まとめ





最初の段落を除いて、違いは大きくなく、選択はアマチュアにとって素晴らしいです。



個人的には、LESSはシンプルであるため、より魅力的に見えます。 スタイルのサイクルや条件は必要ありませんでした。 LESSには、「ボックスシャドウ、線形グラデーション、暗化」などの古典的なユーティリティがあります。



はい、SASSで書かれた既製のライブラリ( compassbourbone 、およびかなり広いコミュニティ)がすでに多くありますが、LESSでも同じTwitter Bootstrapがあり、これで十分です。



PS私は比較ページSASS対LESSを見つけました、そして、 それで 、私は推論された比較の奇妙なサービスを発見しましたwrangl.com



All Articles