CSSプリプロセッサの詳しい説明 Less

CSS プリプロセッサ

CSS プリプロセッサがある理由

CSS は基本的にデザイナーのツールであり、プログラマーのツールではありません。プログラマにとって CSS は、PHP や Javascript などの他のプログラミング言語とは異なり、独自の変数、定数、条件文、および一部のプログラミング構文を備えた単なる属性です。作成には非常に時間がかかり、コードを整理して保守するのは困難です。

当然、他のプログラミング言語と同じように、CSS にいくつかのプログラミング要素を追加して、CSS が他のプログラミング言語と同じように所定の処理を実行できるのではないかと疑問に思う人もいます。このように「CSSプリプロセッサ」というのがあります。

CSS プリプロセッサとは

これは CSS 言語のスーパーセットであり、CSS よりも完全です。

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

平たく言えば、CSS プリプロセッサは、専用のプログラミング言語を使用して Web ページのスタイルをデザインし、プロジェクトで使用するために通常の CSS ファイルにコンパイルします。 CSS プリプロセッサは、ブラウザの互換性の問題を考慮することなく、CSS にいくつかのプログラミング機能を追加します。たとえば、CSS で変数、単純なロジック プログラム、関数などを使用できるようになります。簡潔、適応性が高く、読みやすく、保守が容易であるなど、多くの利点があります。

CSS プリプロセッサ テクノロジーは非常に成熟しており、Sass (SCSS)、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS など、さまざまな CSS プリプロセッサ言語が登場しています。 CSS プリプロセッサは非常にたくさんあるため、「どの CSS プリプロセッサを選択すべきか?」という問題が最近インターネット上で話題になっており、Linkedin、Twitter、CSS-Trick、Zhihu および主要な技術フォーラムで多くの人がこれについて議論しています。これは、CSS プリプロセッサを使用すべきかどうかという以前のテーマから大きく前進しました。

これまでのところ、多くの優れた CSS プリプロセッサ言語の中で、Sass、LESS、Stylus が最も優れており、多くの議論と比較が行われています。この記事では、これら 3 つの CSS プリプロセッサ言語について、背景、インストール、使用構文、違い、その他の比較から紹介します。どの CSS プリプロセッサを選択すべきかは、フロントエンド開発エンジニアが独自に選択すると思います。

less の概要、less は変数、ミックス、関数、ネスト、ループ、その他の機能をサポートする一般的な前処理 CSS です。

less

Comments

less の構文には 2 種類のコメントを含めることができます。

最初のタイプのコメント: テンプレート コメント

// テンプレート コメント ここのコメントは、ブラウザで使用する前に CSS に変換する必要が少ないため、CSS に変換された後に削除されます

。 cssに変換すると、この種のコメントは削除されます（結局のところ、cssはこの種のコメントを認識しません）。

2 番目のコメント: CSS コメント構文

/* CSS コメント構文 CSS に変換して保持 */

概要: コメントを少ない形式で書く場合は、最初のタイプのコメントを書くことをお勧めします。著作権に類似したものでない限り、2 番目のタイプの注釈が使用されます。

変数を定義する

再利用または頻繁に変更される値を変数として定義し、使用する必要がある場所でこの変数を参照するだけです。これにより、多くの作業の重複が回避されます。

(1)lessファイル内で変数のフォーマットを定義します:

@変数名:変数値; //フォーマット@bgColor: #f5f5f5; (2)同時に、 less ファイル内でこの変数を参照します。

main.less：
// 定义变量@bgColor: #f5f5f5;// 引用变量body{    background-color: @bgColor;}

main.css：
body{    background-color: #f5f5f5;}

.container {
  width: 1024px;}.container > .row {
  height: 100%;}.container > .row a {
  color: #f40;}.container > .row a:hover {
  color: #f50;}

main.less:
.container {  width: @containerWidth;  > .row {    height: 100%;    a {      color: #f40;      &:hover {        color: #f50;      }    }  }  div {    width: 100px;    .hello {      background-color: #00f;    }  }}

main.css
.container {    width: 1024px;}.container > .row {    height: 100%;}.container > .row a {    color: #f40;}.container > .row a:hover {    color: #f50;}.container div {    width: 100px;}.container div .hello {    background-color: #00f;}

JavaScriptで最も一般的に使用される20の正規表現

vscodeの共通設定

10進数を16進数に変換する方法

JSでカスタムマウスの右クリックメニューを実装する方法

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