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

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

Now you'll have a new .css file containing the compiled css statements from the .less file.

If you want LESS to also minify the resulting css, add the following option to the command: -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;
}

Will compile to:

#white-box {
  color: #fff;
}

So you can define stuff like colors once and then easily reuse them across your stylesheets.

Mixins：

Mixins are for reusing existing style declarations. Once you declare them, you can reuse them across your stylesheets.
For example, something like this:

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

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

Will compile to:

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

So the first declaration is a mixin - in this case more like a complex variable - the value of which then we insert in another declaration (that of the 。箱 element).

ネスティング：

Another cool thing is that you can nest declarations. For instance:

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

Will compile to:

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

So instead of having repetitions in our code, we nest everything together logically.

オペレーション：

With LESS, you can easily perform operations on numbers and variable values. For instance:

@length: 10px + 20;

.box {
  width: @length / 2;
}

Will output the following css:

.box {
  width: 15px;
}

So LESS can transform units into numbers and perform calculations. This applies also to colors and you can do some really cool and dynamic stuff right in your stylesheets.

関数：

LESS comes with some predefined functions that you can use to manipulate the aspect of HTML elements in your stylesheets. For instance:

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

The saturate（） function will perform a 5% saturation on the color property of the 。箱 element. For more information about what functions you have available in LESS, you can visit このリファレンスページ.

インポート：

LESS allows you to structure your stylesheets and organise them logically. You can create multiple files that contain relevant code and then import them one in another. You can do this with the following statement:

@import "base";

This will include all the declarations you made in the base.less file that resides in the same folder as the file you are importing from. This way you will have available variables and mixins wherever you want. One thing to note is that if you donít specify a file extension, LESS will treat the imported file as a .less file automatically. If you want to import a simple .css file, you can specify the extension and will be treated accordingly. If any other extension is specified, it will be treated again as a .less file.

結論

---

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

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

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

投稿者： Danny