LESS_html/css_WEB-ITnose の予備的な理解

数日前に SASS について話しましたが、CSS をプログラミングしたい場合は、LESS を選択することもできます。 CSS の基本的な知識がある学生は、LESS と SASS を簡単に学習できます。 SASSについてはすでに紹介しましたが、ここではLESSについて予備的な紹介をします。

実際、LESS には SASS と多くの類似点があります。その最大の特徴は、CSS が単なる記述言語ではなく、多くの論理アルゴリズムを追加できることです。同じ作業を退屈に繰り返すのではなく、CSS を書くのがもっと楽しくなります。

LESS は、記述されたコードを標準 CSS コードにスムーズに変換するためのさまざまな方法を提供します。LESS は、Twitter が提供するブートストラップなど、多くの人気のあるフレームワークやツール ボックスでよく見られます。一般に、LESS は実際には SASS の影響を受けて開発されていますが、SASS は Ruby で書かれているのに対し、less は JavaScript で書かれています。 LESS も CSS に属し、CSS コードを記述するために使用されるため、LESS は CSS の構文に従い、括弧を使用してそのコードを含めます。 LESS は、クライアント側またはサーバー側で直接使用できます。実際のプロジェクト開発では、3 番目の方法である LESS ファイルを静的 CSS ファイルにコンパイルし、HTML ドキュメントに適用することをお勧めします。

クライアントが使用する

クライアントが使用する方法は非常に簡単ですが、LESS のソース ファイルを Web ページに直接導入する必要があります。 less.jsのコンパイル済みファイルを紹介します。次のように:

ここで注意すべき点が 2 つあります:

(1)less.js が含まれている必要があります。 LESS ソース ファイルの後半で導入されます。そうしないと、正しく認識できません。

(2) LESSのリンク内のrel属性値はstylesheet/lessですが、CSSはstylesheetです。

サーバー側で使用されます

サーバー側での LESS の使用は、主に LESS コンパイラーを使用して LESS ソース ファイルをコンパイルし、最終的な CSS ファイルを生成することですこれは現在一般的に使用されている方法であり、ノード パッケージ マネージャー (npm) を使用して LESS をインストールすると、LESS ソース ファイルをノード環境でコンパイルできます。

プロジェクト開発の初期段階では、クライアント側で使用するかサーバー側で使用するかに関係なく、使用する CSS または LESS ファイルを HTML ページまたはブリッジ ファイルに導入する方法を見つける必要があります。 LESS は、私たちがよく知っているインポート機能を提供します。このキーワードを使用して、必要な .less または .css ファイルを導入できます。 例:

@import "variables.less";

.less ファイルでは、次のようにサフィックス名を省略することもできます:

@import "variables";

CSS の導入は、.css 接尾辞を省略できないことを除いて、LESS ファイルと同じです。

コンパイルによって生成された静的 CSS ファイルを使用します

LESS コンパイラーを使用して、LESS ファイルを CSS ファイルにコンパイルし、HTML 記事に導入できます。ここで強調すべきことの 1 つは、LESS は CSS 構文と完全に互換性があるということです。つまり、標準の CSS ファイルを .less 形式に直接変更でき、LESS コンパイラーはそれを完全に認識できます。

構文も非常に単純で、基本的に SASS と似ていますが、SASS では括弧が必要ないのに対し、LESS では CSS のように括弧を追加する必要がある点が異なります。この構文には次のような大きな特徴があります。

1. 変数

変数は、js と同様に、グローバル スタイルで簡単に使用できます。 。他のプログラミング言語と同様に、LESS の変数は変数であるため、値を再利用できます。ローカル変数とグローバル変数に分けることができます。ローカル変数とグローバル変数の違いは、js のローカル変数とグローバル変数の違いに似ています。

2. ミキシング

開発者にとって、Mixins (ミキシング) 機能は、LESS の実装である Mixins (ミキシング) 機能をサポートしています。 , 混合とは、現在のクラスに属性を追加するのと同じように、定義された別のクラスをクラスに導入することを指します。

3. 操作

CSS には操作機能はありませんが、LESS では簡単に操作を実装できます。

4. 関数

LESS も js と同様に関数を定義し、定義された関数を呼び出すことで一部の関数を実装することができます。

5. ネスト

ネストは SASS と同じであり、モジュールを区別するのに非常に適しています。

LESS について予備的な理解はありましたか? LESSに興味がある方は、わからなくても大丈夫です。後ほど、皆さんが興味を持つフロントエンドの知識について解説します。ファンが1,000人を超えたので、たくさんの動画講座を収録していきます。広めていただけると幸いです。

私の記事に興味があれば、もっと注目していただければ、毎日8時に記事を更新します。