CSS の 3 種類のプリプロセッサについて話します

この記事では、3 種類の CSS プリプロセッサを紹介し、それらの違いを理解するために比較します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1. はじめに

CSS プリプロセッサは新しい言語を定義します。基本的な考え方は、開発者に特化したプログラミング言語を使用することです。この言語を使用する必要があるのはコーディング作業のみであり、CSS コードを記述する退屈なプロセスが軽減されます。同時に、CSS をより簡潔にし、適応性を高め、読みやすく、より階層的にすることができます。明らかに、コードのメンテナンスが容易になり、多くの点が改善されます。他の利点。

CSS プリプロセッサには多くの種類がありますが、主流は Less、Sass (Scss)、Stylus の 3 つで、それぞれの背景は次のとおりです:

Sass: 2007 年生まれ、最も古いRuby コミュニティと compass のサポートを備えた、最も成熟した CSS プリプロセッサ。最も強力な CSS フレームワークです。

現在、LESS の影響を受けて、CSS と完全に互換性のある SCSS に進化しました (SCSS では、改行やインデントの代わりにセミコロンや中括弧を使用する必要があります)。

レス: 2009 年に登場。SASS の影響を大きく受けていますが、CSS 構文も使用しているため、ほとんどの開発者やデザイナーが簡単に始めることができます。Ruby コミュニティ以外のサポーターの方がはるかに多いです。サス。

欠点は、SASSに比べてプログラマブル機能が不足していることです。

ただし、シンプルで CSS と互換性があるという利点があり、これが SASS から SCSS の時代への進化に影響を与えました。有名な Twitter Bootstrap は基礎的な言語として LESS を使用しています。

Stylus: 2010 年に Node.js コミュニティから作成されました。

は主に Node プロジェクトの CSS 前処理サポートを提供するために使用され、このコミュニティには特定の支持者がいますが、広い意味での人気は SASS や LESS ほどではありません。

2. 比較

CSS プリプロセッサを使用する前に最も重要なことは、構文を理解することです。幸いなことに、ほとんどのプリプロセッサの構文は基本的に CSS の構文と同じです。 。 ほとんど。

まず第一に、Sass と Less はどちらも標準の CSS 構文を使用するため、既存の CSS コードをプリプロセッサ コードに簡単に変換できる場合、Sass はデフォルトで .sass 拡張子を使用しますが、Less は .less 拡張子を使用します。

h1 {
  color: #0982C1;
}

これは非常に一般的なものですが、Sass は中括弧とセミコロンを含まない古い構文もサポートしています:

h1
  color: #0982c1

そして、Stylus はより多くの構文をサポートしています より多様にするために、次のようにします。デフォルトでは、ファイル拡張子は .styl です。Stylus でサポートされている構文は次のとおりです:

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

同じスタイル シート内で異なる変数を使用できます。たとえば、次の記述方法ではエラーが報告されません:

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨事項: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、プログラミング入門をご覧ください。 ！

以上がCSS の 3 種類のプリプロセッサについて話しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。