LESS ファイルの作成方法とコンパイル方法

＃＃＃＃＃＃概要 ＃＃＃

a

Leaner Style Sheets (LESS)

は、基本言語が Cascading Style Sheets (CSS) である動的前処理言語です。すべての前処理言語は基本言語のアップグレード バージョンであるため、LESS には多くの追加機能もあります。 LESS には、変数、親セレクター、ミックスイン、ネストされたセレクターなどの関数があります。 Java では、「

.java」ファイルのソース コードをコンパイルすると、出力ファイル「.class」が生成されます。同様に、LESS ファイルのソース コードをコンパイルすると、次の出力が生成されます。ファイル「.less 」ファイルは、出力として新しいファイル「.css」を生成します。 ＃＃＃方法＃＃＃ LESS ファイルを作成してコンパイルするには、次の手順に従う必要があります -

デスクトップまたはコマンド ライン (cmd) でターミナルを開きます。ノード パッケージ マネージャー (npm) を使用して、学習者スタイルシート (LESS) 環境をコンピューターにグローバルにインストールします。

リーリー

• デスクトップにフォルダーを作成します。次に、任意のテキスト エディタを開いて、
LESS

コードを記述します。

• 「.less」コードを含むファイルを「style.less

  」として保存します。

• ここで、コマンド ライン インターフェイス (CLI) を開き、コマンド cd フォルダー名を使用して、「style.less

  」ファイルを作成したサブフォルダーに移動します。 「cd」はディレクトリを変更することを意味します。

• less ファイルが存在するフォルダーに到達したら、次のコマンドを入力して「style.less

  」をコンパイルします。これにより、「
style」が生成されます。 .css"
• "ドキュメント。

  リーリー

  ファイル「
style.css

」を開くと、その中のコードは「

style.less
• 」の変換された

  css コードになります。ファイル。 ＃＃＃特徴＃＃＃ リーナー スタイル シート (LESS) の主な機能は、-

です。

変数− Less言語には変数を作成し、そこにCSSプロパティ値を格納する機能があります。 Less ファイルに変数を作成するための接頭辞は「@

」です。例: @width:10rem、@height:10rem、@background:green など。

• ミキシング- この機能は、重複することなくスタイル コードを作成する機能を提供します。上記で作成したスタイルは、他の要素のスタイルとして再利用できます。

• 例 - リーリー ＃＃＃アルゴリズム＃＃＃

ステップ 1

- コードの作成を開始する前に、上記の方法を使用して Less コンパイラをインストールします。 「less」コンパイラがインストールされている場合は、次のコマンドを使用してコマンド ライン インターフェイスでそれを確認できます。

リーリー 「less

」コンパイラがコンピュータにインストールされている場合は、そのバージョン番号が出力されます。

ステップ 2

- デスクトップに「LESS」という名前のフォルダーを作成します。任意のテキスト エディタで HTML ファイルを作成し、そのファイルに HTML ボイラープレート コードを記述します。

ステップ 3

- 同じフォルダーに「style.less

」ファイルを作成し、Web ページのスタイルを設定するコードを記述します。

リーリー ステップ 4

- 次に、コマンド ライン インターフェイス (CLI) を使用して、デスクトップ上に作成したサブフォルダーに移動します。 cd デスクトップ、cdless コマンドを使用して、目的地に到達します。

ステップ5 -コマンドを使用して「style.less

」ファイルをコンパイルします。

リーリー ステップ 6

- ファイルをコンパイルすると、「

style.css」ファイルが正常に作成されました。これで、Web ページを適切なスタイルでブラウザに読み込む準備が整いました。 ＃＃＃例＃＃＃ この例では、less ファイルがコンパイルされていないときの Web ページがどのように見えるか、そしてコンパイルされた後にどのように見えるかを見ていきます。これを実現するには、CSS ファイルとフォルダー内の「less」ファイルをリンクする Web ページを作成します。 リーリー

以下の画像は、「

style.less」のコンパイル中の出力を示しています。Web ページが構築され、CSS でリンクされると、スタイルなしで HTML 部分のみが表示されるページが表示されます。 「style.less」ファイルをコンパイルした後、ファイルに記述されたスタイルがコンパイルされ、以下に示す適切なスタイルで Web ページの出力を表示する style.css ファイルが作成されます。 ＃＃＃結論は＃＃＃ LESS スタイル シート (LESS) は、巨大な「css」ファイルを維持する必要がある大規模なプロジェクトを構築する場合に非常に役立ちます。したがって、「LESS」はコードの乱雑さを回避できる変数の機能を提供します。 「CSS」に比べて「LESS」コードのメンテナンスが容易です。たとえば、Web サイト上のボタンのスタイルを変更したい場合、ボタンの境界線の半径と背景色を変更する必要があるとします。 CSS 要素ごとにスタイルを変更するのではなく、変数に 2 つの変更を加えるだけで開発者の作業が楽になります。

以上がLESS ファイルの作成方法とコンパイル方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。