ブラウザ側Less_html/css_WEB-ITnose

概要:

以前のプロジェクトでも Less を使用しており、現在担当しているプロジェクトでも使用する予定なので、今後の参考のために Less についてまとめておきます。この記事では主にブラウザ側での Less の使い方について説明します。

LESS は、Alexis Sellier によって設計された動的カスケード スタイル シート言語です。 LESS はオープンソースであり、最初のバージョンは Ruby で作成されましたが、後続のバージョンでは、Ruby は徐々に JavaScript に置き換えられました。 JavaScript のおかげで、LESS はクライアント (IE6+、Webkit、Firefox) またはサーバー (Node.js、Rhino) で実行できます。

基本的に、LESS には一連のカスタム文法とパーサーが含まれており、ユーザーはこれらの文法に基づいて独自のスタイル ルールを定義し、最終的にはパーサーによってコンパイルされて、対応する CSS ファイルが生成されます。 LESS は、CSS の元の機能を調整したり、CSS を置き換えたりするのではなく、既存の CSS 構文に基づいて CSS に手続き型言語機能を追加します。 LESS ファイルに CSS ルールに従ってスタイルを記述することもできます。

開発効率を向上させるために、従来のスタイルの記述方法を変更し、オブジェクト指向の方法で記述します。

まず、導入された rel 属性の値は、stylesheet/less の .less スタイル シートです。以下のように:

HTML ページをレンダリングするときは、less ファイルを CSS にコンパイルする必要があります。ファイル。さまざまな方法でそれを実現できます。 Node.js などのサーバー側では、専用のコンパイルの少ないモジュールを用意しています。クライアント上にある場合は、LESS 公式 Web サイトからless.js ファイルをダウンロードし、次のように HTML ページに導入する必要があります: