LessはCSSプリプロセッサ言語です。CSS言語を拡張し、変数、ミックスイン（mixin）、関数などの機能を追加することで、CSSをより保守しやすくし、テーマの作成や拡張を容易にします。

LessはNode、ブラウザ、Rhinoプラットフォームで実行できます。オンラインにはLessソースコードのコンパイルを支援する多くのサードパーティツールがあります。

实例:

@base: #F938AB;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

编译结果

.box {
  color: #FE33AC;
  border-color: #FDCDEA;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Lessはnpmを使用してコマンドラインで実行できます。ブラウザではスクリプトファイルとしてダウンロードできます。または、多数のサードパーティ製ツールに統合されています。参照してください。用法。

インストール

サーバーサイドで最も簡単なインストール方法は、npm を使用することです（node.jsのパッケージマネージャー）、方法は以下のとおりです。

$ npm install -g less

コマンドラインでの使用法：

Less をインストールすると、コマンドラインで Less コンパイラを呼び出せるようになります。例：

$ lessc styles.less

これにより、コンパイル後の CSS コードが次の場所に出力されます：stdout出力をファイルにリダイレクトすることができます：

$ lessc styles.less > styles.css

圧縮された CSS を出力するには、次のオプションを追加するだけです：-xオプション。より良い圧縮効果を得たい場合は、次の方法も利用できます：--clean-css 选项启用 Clean CSS 进行压缩。

lessc を引数なしで実行すると、利用可能なすべてのオプションのリストがコマンドラインに出力されます。

コードでの使用

コード内で Less コンパイラを次のように呼び出すことができます（Node プラットフォーム）。

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

出力結果は次のとおりです：

.class {
  width: 2;
}

パーサーとコンパイラを手動で呼び出すこともできます：

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});

設定

コンパイラに複数のパラメータを渡すことができます：

var parser = new(less.Parser)({
  paths: ['.', './lib'], // Specify search paths for @import directives
  filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});

サードパーティ製ツール

查看用法サードパーティ製ツールの詳細については、一部をご参照ください。

Rhino コマンドライン

各less.jsリリースバージョンには、rhino互換バージョンも含まれています。

コマンドラインの Rhino バージョンには、次の 2 つのファイルを含める必要があります：

less-rhino-.js - 编译执行,
lessc-rhino-.js - 命令行支持

コマンドラインでコンパイルを実行：

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

上記の操作により、styles.less ファイルがコンパイルされ、styles.css ファイルとして保存されます。出力ファイルの引数はオプションです。この引数を指定しない場合、less はデフォルトで標準出力に出力します（stdout）。

クライアント側での使用法

ブラウザ上でless.jsを実行するのは開発に非常に便利ですが、本番環境での使用は推奨されません。

クライアント側で Less.js を使用するのが最も簡単な方法であり、開発段階では非常に便利ですが、本番環境ではパフォーマンスと信頼性が非常に重要です。node.js または他のサードパーティ製ツールを使用したプリコンパイルを推奨します。。

それでは始めましょう。ページに追加します。.lessスタイルシートのリンク、そしてそれをrel属性を " に設定stylesheet/less"：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

次に、ダウンロードless.js 并通过 <script></script>タグでそれを導入し、ページの<head> 元素内：

<script src="less.js" type="text/javascript"></script>

ヒント

スタイルシートが less.js より前に読み込まれるようにしてください。
複数をロードする場合.lessスタイルシートファイルは、各ファイルが個別にコンパイルされます。そのため、1 つのファイルで定義された変数、ミックスイン、または名前空間は、他のファイルからアクセスできません。

ブラウザオプション

に<script src="less.js"></script>前にグローバルなlessオブジェクトは...に対して利用できますLess.js 设置参数：

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

もっと詳しく浏览器选项

ブラウザダウンロード

下载 Less.js v1.7.3

bower install less

Less CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>

Less.jsはApache 2ライセンスに基づいて公開されています（将来はデュアルライセンス方式を採用する予定です）。著作権は2009-2014年、Alexis SellierおよびLessコアチームに帰属します（上記参照）。要約は以下の通りです。

あなたに与えられる権利：

Less.js の全部または一部のコードを自由にダウンロードして使用でき、個人、社内、または商業目的で利用できます。
Less.js を製品に含めること

严禁：

著作権表示を行わずに Less.js のコード断片を使用すること

あなたの義務：

製品に Less.js を含める場合は、Less.js の著作権表示を 1 部含める必要があります。
Less.js を含む製品において、Less.js の著作権が Less コアチームに帰属することを明示すること

不需要：

製品に Less.js 自体または修正したソースコードを含めること
Less.js に加えた変更を Less.js プロジェクトに提出すること（Less.js への改善提案を提出することを推奨します）

Less.js の完全な著作権情報は次の場所にあります：项目仓库内，请参考。

クイックスタート

クイックスタート

Less の使用