CSSプリプロセッサの詳しい説明 Less-htmlチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-02-28 10:13:56

オリジナル

1538 人が閲覧しました

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 ファイル内でこの変数を参照します。

最後に、less ファイルの完全なコードは次のとおりです:

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

ログイン後にコピー

上記のlessファイルをcssファイルにコンパイルした後(次の段落でlessファイルのコンパイルについて説明します)、自動生成されるコードは次のようになります。以下:

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

ログイン後にコピー

ネストを使用する

子孫セレクターは CSS でよく使用され、その効果は次のようになります:

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

ログイン後にコピー

上記のコードは多くの層でネストされており、記述するのは非常に面倒です。ただし、less のネストされた構文を使用してこのコードを作成すると、コードはより簡潔になります。

ネストの例は次のとおりです:

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

ログイン後にコピー

上記のlessファイルをCSSファイルにコンパイルした後、自動的に生成されるコードは次のとおりです:

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;}

ログイン後にコピー

これらの事例を読んだ後は、この方法を習得したと思います。情報については、php 中国語 Web サイトのその他の関連記事にご注意ください。