Sass と Less の違い-CSSチュートリアル-php.cn

Sass と Less の違い

「どの CSS プリプロセッサ言語を選択すればよいですか?」

CSS プリプロセッサとは何ですか?

CSS プリプロセッサは、新しい言語を定義します。基本的な考え方は、特殊なプログラミング言語を使用して、いくつかのプログラミング機能を CSS とターゲット CSS に追加することです。ファイルを生成すると、開発者は次のことを行うだけで済みます。この言語を使用して CSS をコーディングします。

CSS プリプロセッサを使用する理由

CSS は単なるマークアップ言語であり、変数をカスタマイズしたり引用したりすることはできません。

CSS には次のような特有の欠点があります:

構文は十分強力ではありません。たとえば、ネストできないため、多くのエラーが発生します。モジュラー開発で必要な記述の必要性. セレクターの重複;
変数と合理的なスタイルの再利用メカニズムがないため、論理的に関連する属性値を次の形式で繰り返し出力する必要があります。リテラルなので保守が困難になります。

#プリコンパイルは、子孫セレクターの悪用に簡単につながる可能性があります

プリプロセッサを使用する利点

欠落している CSS レイヤーにスタイルレイヤーの再利用メカニズムを提供する
##スタイルの効率を向上させるcode 保守性

##Less (Leener Style Sheets の略) は、下位互換性のある CSS 拡張言語です。 Less は CSS に非常に似ているため、Less は CSS 言語に便利な拡張機能をいくつか追加するだけなので、学習が簡単です。

sass は、「世界で最も成熟し、安定しており、強力なプロ仕様の CSS 拡張言語」です。 CSS のすべてのバージョンと互換性があり、Compass、Bourbon、Susy など、Sass で構築されたフレームワークが無数にあります。
SASS バージョン 3.0 より前のサフィックスは .sass ですが、バージョン 3.0 以降のサフィックスは .scss です。

Sass や Less などの言語は、実際には CSS のスーパーセットとして理解できます。CSS の元の構文形式に基づいて、変数の使用や使用などのプログラミング言語の機能が追加されています。論理ステートメントのサポート、機能などCSS コードの保守と再利用が容易になります。
しかし、ブラウザは最終的に CSS ファイルしか認識しないことは間違いなく、CSS 内の変数や論理ステートメントを扱うことができないため、Sass 以下で書かれたコードを標準 CSS に変換するにはコンパイルプロセスが必要です。、このプロセスは CSS 前処理と呼ばれます。

補足説明

ruby sass

Ruby SassはSassのオリジナル実装ですが、彼は2019年3月26日に亡くなるとあります。私たちはそれに対するサポートを提供しなくなり、Ruby Sass ユーザーは別の実装 (LibSass または Dart Sass) に移行するように求められます。＃＃＃＃＃＃＃＃＃なぜ？

最初は、Ruby で Sass を書くと、既存のユーザーだけでなく、Ruby エコシステム全体でも Sass を使用するよう簡単に引き付けることができました。

その後、Node.js がフロントエンド開発で広く使われるようになりました。消え、ルビーは背景に消えていきます。同時に、Sass プロジェクトの規模は作者の当初のビジョンをはるかに超えており、Sass のパフォーマンス要件は Ruby の能力を超えています。

Dart-sass

私は Sass をあまり使用しないので、リマインドしてくれた @WashingtonHua に感謝します

sass 2016 年 11 月 Dart Sass 42 プロジェクトのアルファ版が正式に発表されました。つまり、Dart を使用して Sass を書き直しました。

sass-lang 公式 Web サイトによると:

Dart Sass は Sass の主要な実装であり、他の実装よりも先に新機能を追加します。高速かつ簡単にインストールでき、純粋な JavaScript にコンパイルされるため、最新の Web 開発ワークフローに簡単に統合できます。

純粋な JS バージョンはスタンドアロンバージョンよりもパフォーマンスが遅くなりますが、既存のワークフローに簡単に統合でき、JavaScript を通じて関数やインポーターをカスタマイズできます。 npm install --save-dev sass コマンドを実行してプロジェクトに追加し、require() を通じてインポートします。

Dart Sass を npm 経由でインストールすると、Node Sass との互換性を保つ JavaScript API が提供されます。完全な互換性は進行中です

libSass

Sass はもともと Ruby で書かれていました。 LibSass は、C/C で実装された Sass エンジンです。重要な点は、シンプル、高速、簡単に統合できることです。

LibSass は単なるツールライブラリです。ローカルで実行するには (つまり、Sass コードをコンパイルするには)、LibSass ラッパーが必要です。 LibSass にはすでに多くのパッケージがあります。

Sass C (C 言語で開発されたパッケージ)

sass.cr は、Crystal プログラミング言語の LibSass パッケージです。

go-libsass は最もアクティブな Go 言語パッケージです。

詳細については、

sass.bootcss.com/libsass

# を参照してください。

##LessLess は、CSS 言語を拡張し、変数、ミックスイン、関数、その他の機能を追加して CSS の保守と拡張を容易にする CSS 前処理言語です。。

Less はノードまたはブラウザ上で実行できます。有効な CSS スニペットは、それ自体が有効な LESS スニペットです。

LESS は、変数、ネスト、ミックスイン、演算子、関数など、一般的なプログラミングに必要な抽象メカニズムを提供します。

変数

変数を使用すると、一連の共通の値を 1 か所で定義し、スタイルシート全体でそれらを呼び出すことができます。

グローバルスタイルを調整する場合、数行のコードを変更するだけで済む場合があります。
@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}
ログイン後にコピー
コンパイル:
#header {
  width: 10px;
  height: 20px;
}
ログイン後にコピー
Mixins
Mixins は、ルールセット (またはミックスイン) から別のルールセットに組み込まれるプロパティのセットです。。次のようにクラスを定義するとします。
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
ログイン後にコピー
これらの属性を他のルールセットで使用する場合は、次のように必要な属性のクラス名を入力するだけです
#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}
ログイン後にコピー
Nesting
Less は、カスケードの代わりに、またはカスケードと組み合わせてネストを使用する機能を提供します。次の CSS コードがあるとします。
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
ログイン後にコピー
Less 言語を使用すると、次のようなコードを作成できます。
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
ログイン後にコピー
Less で書かれたコードはより簡潔で、HTML の組織構造を模倣します。
この方法を使用して、ミックスインで疑似セレクターを使用することもできます。これは、ミックスインとして書き直された古典的な Clearfix トリックです (& は現在のセレクターの親を表します):
.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
ログイン後にコピー
Operations
算術演算子、-、*、/ は可能です。任意の数値、色、または変数を操作します。
演算子の両側の変数の単位が異なる場合、加算、減算、または比較の前に単位変換が実行されることに注意してください。計算結果は、左端のオペランドのユニットタイプに基づきます。単位変換が無効または無意味な場合、単位は無視されます。 px から cm、rad から % などの単位変換が無効です。
単位がない場合は変換は行われません
// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算：
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355
ログイン後にコピー
関数
Lessには色変換や処理のためのさまざまな関数が組み込まれています文字列、算術演算など。これらの関数については、Less 関数マニュアルで詳しく説明されています。
関数の使用法は非常に簡単です。次の例では、パーセント関数を使用して 0.5 を 50% に変換し、色の彩度を 5% 増加させ、色の明るさを 25% 減少させ、色相の値を 8 増加させる方法を紹介します。
Import (インポート)
.less ファイルをインポートすると、このファイル内のすべての変数を使用できます。インポートされたファイルに .less 拡張子が付いている場合は、拡張子を省略できます。
@base: #f04615;
@width: 0.5;
.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
ログイン後にコピー
この記事では、less のいくつかの機能について簡単に紹介するだけです。 Less のより詳細な紹介については、記事の最後にある参考資料 2 を参照してください。
#Sass
Sass は、CSS を強化する補助ツールです。変数を追加します (変数、ネストされたルール、ミックスイン、インラインインポート、その他の高度な機能。これらの拡張機能により、CSS がより強力でエレガントになります。
特長
CSS3と完全互換
CSS、ネスト、ミックスインに基づいて変数を追加その他の関数
関数を通じて色値や属性値の操作を実行します
制御命令(制御ディレクティブ)などを提供します高度な機能
カスタマイズされた出力形式
変数
変数を識別するための Sass の使用法 ( Sass の古いバージョンでは、変数を識別するために ! を使用します。
$highlight-color: #F90;
CSS プロパティとは異なり、変数は CSS ルールブロックの外側に定義できます。 CSS ルールブロック内では、変数はこのルールブロック内でのみ使用できます。
@import "library"; // library.less
@import "typo.css";
ログイン後にコピー
変数を宣言するとき、変数値は他の変数も参照できます。
##Nesting( Nesting)
基本的な使い方はless
サブコンビネーションセレクターと同レベルのコンビネーションセレクター:>、~
this の3つのコンビネーションセレクターと同じです。ブラウザが特定のコンテキスト内の要素のみを選択することを指定するには、他のセレクターと組み合わせて使用する必要があります。
これらの組み合わせセレクターは、Sass のルールのネストに簡単に適用できます。外側のセレクターの後または前に配置できます。内部セレクター:
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}
ログイン後にコピー
sass は、必要に応じてこれらのネストされたルールを 1 つずつ解凍して結合します:
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
ログイン後にコピー
ネストされた属性;
sass では、 CSS セレクターに加えて、属性もネストできます。
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
ログイン後にコピー
ネストされた属性のルールは次のとおりです: 属性名をダッシュ - で区切って、ルート属性の後にコロン: を追加し、その後に { を付けます。 } ブロックを作成し、この { } ブロックにサブ属性部分を記述します。CSS セレクターのネストと同じように、sass サブ属性を 1 つずつ展開し、ルート属性とサブ属性をダッシュ - で接続します。最終的な効果は、手動で何度も繰り返し書いた CSS スタイルと同じになります:
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
ログイン後にコピー
属性の省略形の場合、次のようにネストして例外ルールを示すこともできます:
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
ログイン後にコピー
mixer;
ミキサーは @mixin 識別子を使用して定義されます。このシンボルはスタイルの大部分に名前を与え、名前を参照することで簡単に再利用できます。
下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
ログイン後にコピー
然后就可以在样式表中通过@include来使用这个混合器。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
ログイン後にコピー
less及sass都支持混合器传参，具体内容参见参考文档 2、3
导入SASS文件;
css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。
使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀
使用SASS部分文件
当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。
sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css
默认变量值;
!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
ログイン後にコピー
在上例中，如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量，那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明，则$fancybox-width将默认为400px。

相同与差异

相同之处：

Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

、

目前大部分的实现都是随着前端项目一起打包构建，只在学习或演示的时候才区分使用环境，所以不用在意处理机制，以上只是单纯的对比两者本身。

请不要忘记Dart Sass，它快速，易于安装，并且可以编译为纯JavaScript，从而可以轻松集成到现代Web开发工作流中。

在Less中，仅允许循环数值。

在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。

条件语句

Less 中并不支持条件语句，当然，可以通过内置函数 if 以及 and，or，not 这些来模拟条件语句。

在 Sass 中是支持条件语句的，但也不是像其他编程语言直接 if 这样通过保留字来编写，需要加个 @ 符号

框架-

sass框架谁有空可以在评论区补充一下

用哪个？

不知道～

LESS环境较Sass简单

LESS使用较Sass简单，大概？

相对而言，国内前端团队使用LESS的同学会略多于Sass

从功能出发，Sass较LESS略强大一些

Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation

就国外讨论的热度来说，Sass绝对优于LESS

就学习教程来说，Sass的教程要优于LESS(本身来说，less官方文档也够用了)。

推荐教程：《CSS教程》《PHP教程》

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