CSS 拡張テクノロジー: Less と Sass_html/css_WEB-ITnose の違い

今週、私は Less と Sass の 2 つの CSS フレームワークを学習し、それぞれの構文と特徴を基本的に理解し、2 つの HTML Web デザイン演習を通じて、CSS Web レイアウト プロセスで開発者にどのような利便性が提供されるかを感じました。もたらします。以下に、それらの違いについて私なりにまとめてみました。

Less と Sass の類似点:

1. 変数: 一連の共通スタイルを個別に定義し、必要に応じて呼び出すことができます。

2. ミックスイン: クラス内のクラス (クラス間の継承を実現するために、あるクラスを別のクラスに導入する)、関数と同様にパラメーターと混合することもできます。

3. ネスト: コードの重複を減らすためにクラス内でクラスをネストします。

4. 演算: 属性値と色の演算を実行できる、加算、減算、乗算、除算の 4 つの算術演算を提供します。

Less と Sass の違い:

1. 実装方法: Less は JavaScript に基づいており、クライアント側で処理されます。Sass は Ruby に基づいてサーバー側で処理されます。

2. 変数の定義: Less は変数を定義するときに接頭辞を使用します: @; Sass は変数を定義するときに接頭辞を使用します: $。

//Less定义变量：@color: #4D926F;#header {    color: @color;}//Sass定义变量    $blue : #1875e7;　        　　div {    　　　color : $blue;    　　}

3. ミックスイン: Less でミックスインを使用する場合は、Sass の classA の名前に従ってクラス B でのみ使用する必要があり、ミックスを定義するときに最初に @mixin コマンドを使用する必要があります。 、そして 2 番目に、以前に定義されたミックスを導入するために呼び出すときに @include コマンドを使用する必要があります。

//Less中的混合：.rounded-corners (@radius: 5px) {    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    -ms-border-radius: @radius;    -o-border-radius: @radius;    border-radius: @radius;}#header {    .rounded-corners;}#footer {    .rounded-corners(10px);}//Sass中的混合： @mixin left($value: 10px) {    　　　　float: left;    　　　　margin-right: $value;    　　}    div {    　　　　@include left(20px);    　　}

4. 解析方法: Less は上/下で解析できます。

5. 変数のスコープ: Less の変数はグローバルとローカルに分けられます。Sass 変数はグローバルであると理解できますが、変数を追跡することもできます。デフォルトでは、この問題を解決するには、Sass ファイルにインポートする前に変数の属性値を変更します。

//Less：@width:100px;h1{  @width:200px;  width:@width;}h2{  width:@width;}编译后：h1 {  width: 200px;}h2 {  width: 100px;}//Sass：$borderColor:red !default;.border{  border:1px solid $borderColor;}编译后：.border {  border: 1px solid red; }

6. Less と比較すると、Sass は条件ステートメント (if、if...else) とループ ステートメント (for ループ、while ループ、各ループ) およびカスタム関数を追加します。

以上が、Less と Sass の違いを私なりにまとめたものです。これらはすべて開発者にとって優れたツールであり、開発者がより効率的かつ迅速に作業できるようにすることもできます。どちらを使用するかについては、自分の好みや勤務する企業の要件に応じて、1 つまたは 2 つを柔軟に使用できます。