UbuntuVPSでLESSCSSプリプロセッサを使用する方法

投稿日: 2022-04-20 2022-10-15
タグ: Miscellaneous, ubuntu

LESSについて

LESS は、単純なフラットCSSを使用するよりもはるかに効率的かつインテリジェントな方法でスタイルシートを作成できるCSSプリプロセッサです。これは、コードをより小さく、より再利用可能で、よりスケーラブルにする多数の動的コンポーネントを提供します。その構文はかなり理解しやすく、通常のCSSに置き換わるのではなく追加されます。

LESSを使用できる主な方法は、サーバー側またはクライアント側の2つです。最初のケースでは、cssにコンパイルするためにNode.jsが必要ですが、2番目のケースでは、JavaScriptファイルをダウンロードしてページに含める必要があります。この2番目の方法は、実稼働サイトにはあまりお勧めできませんが、開発指向のウォッチモードがあり、興味がある場合はチェックする必要があります。

このチュートリアルでは、LESSをインストールして、サーバー側で使用を開始する方法を説明します。このため、UbuntuとWebサーバーがインストールされた独自のVPSをすでに実行していることを前提としています（ブラウザーで何かを表示したい場合）。さらに、Node.jsとNPM（Node Package Manager）をインストールする必要があります。まだお持ちでない場合は、このチュートリアルで概説されている手順に従ってセットアップしてください。

インストール

したがって、Node.jsとNPMがすべて設定されていると仮定すると、次のコマンドを実行してLESSをインストールできます。

npm install -g less

VPSにインストールしたら、コマンドラインを使用して、LESSに.cssにコンパイルするファイルを少なくするように指示できます。試してみるには、Webサーバーのドキュメントルート（デフォルトはApacheの / var / www ）に移動し、.lessファイルを作成します。

nano /var/www/test.less

このファイル内に、次のcss宣言を貼り付けます（LESS言語は基本的にcssであり、その上にいくつかの優れた機能が追加されていることに注意してください）。

#box {
  color:red;
}

LESSでこのファイルをcssにコンパイルし、結果をターミナルに出力するには、次のコマンドを実行します。

lessc /var/www/test.less

ターミナルウィンドウに結果が印刷されているはずです。この出力を.cssファイル（より一般的なシナリオ）に書き込むには、ファイルの宛先も指定します。

lessc /var/www/test.less > /var/www/test.css

これで、.lessファイルからコンパイルされたcssステートメントを含む新しい.cssファイルが作成されます。

LESSで結果のcssも縮小する場合は、コマンドに次のオプションを追加します。-x

lessc /var/www/test.less > /var/www/test.css -x

これにより、本番環境で縮小されたcssが作成されます。 LESSコマンドに渡すことができるオプションの詳細については、このページにアクセスするか、パラメーターなしでlesscコマンドを実行してください。

LESS言語

では、なぜLESSがそれほど優れているので、単純なcssの代わりに試してみる必要があるのでしょうか。以下に、いくつかの理由を示します。

変数：

LESSを使用すると、cssで変数を使用できます。例えば：

@white: #fff;

#white-box {
  color: @white;
}

コンパイルされます：

#white-box {
  color: #fff;
}

したがって、色などを一度定義すれば、スタイルシート全体で簡単に再利用できます。

ミックスイン：

ミックスインは、既存のスタイル宣言を再利用するためのものです。それらを宣言すると、スタイルシート全体でそれらを再利用できます。
たとえば、次のようなものです。

.shape {
  size: 100%;
  padding: 20px;
}

.box {
  .shape;
  background-color: red;
}

コンパイルされます：

.box {
  size: 100%;
  padding: 20px;
  background-color: red;
}

したがって、最初の宣言はミックスイン（この場合はより複雑な変数のようなもの）であり、その値を別の宣言（ .box 要素の宣言）に挿入します。

ネスト：

もう1つの優れた点は、宣言をネストできることです。例えば：

.box {
  color: red;
  .box-inner {
    max-width: 80%
  }
}

コンパイルされます：

.box {
  color: red;
}
.box .box-inner {
    max-width: 80%
}

したがって、コードで繰り返しを行う代わりに、すべてを論理的にネストします。

操作：

LESSを使用すると、数値や変数値の操作を簡単に実行できます。例えば：

@length: 10px + 20;

.box {
  width: @length / 2;
}

次のcssを出力します。

.box {
  width: 15px;
}

したがって、LESSは単位を数値に変換して計算を実行できます。これは色にも当てはまり、スタイルシートで本当にクールでダイナミックなことを行うことができます。

機能：

LESSには、スタイルシートのHTML要素のアスペクトを操作するために使用できるいくつかの定義済み関数が付属しています。例えば：

.box {
  color: saturate(#398bce, 5%);
}

saturate（）関数は、.box要素のcolorプロパティに対して5% saturationを実行します。 LESSで使用できる機能の詳細については、このリファレンスページにアクセスしてください。

インポート：

LESSを使用すると、スタイルシートを構造化し、論理的に整理できます。関連するコードを含む複数のファイルを作成し、それらを別のファイルにインポートできます。これは、次のステートメントで実行できます。

@import "base";

これには、インポート元のファイルと同じフォルダーにあるbase.lessファイルで行ったすべての宣言が含まれます。このようにして、必要な場所で使用可能な変数とミックスインを使用できます。注意すべき点の1つは、ファイル拡張子を指定しない場合、LESSはインポートされたファイルを.lessファイルとして自動的に処理することです。単純な.cssファイルをインポートする場合は、拡張子を指定すると、それに応じて処理されます。他の拡張子が指定されている場合は、.lessファイルとして再度扱われます。

結論

この記事では、スタイルシートの管理と使用法を改善するためにLESSを使用することの威力を少し見てきました。サーバー側でインストールして使用する方法と、通常のcssにもたらされる言語の改善を垣間見ることができます。公式LESSWebサイトから詳細を読み、それを使用して実行できるすべてのことについてさらに学ぶことをお勧めします。

さらに、興味がある場合は、コンピューター上でLESSを操作するのに役立つGUIアプリケーションを利用できます。これには、.lessファイルをcssにコンパイルすることも含まれます。 CrunchやMixtureのような、WindowsとMacの両方で動作するクロスプラットフォームコンパイラだけでなく、特定のプラットフォーム用のコンパイラもあります。こちらでチェックできます。

または、別の人気のあるCSSプリプロセッサであるSassもチェックすることをお勧めします。 DigitalOceanに関するチュートリアルがあります。

投稿者： Danny

getdocs

13036