コマンドラインの使い方

"command-line-usage"のMarkdownソースを編集する

コマンドラインを使用して.lessファイルを.cssにコンパイルする

注意!コマンドラインが苦手な方は、Less用GUIについて詳しく学んでください。

インストール

npmでインストールする

npm install less -g

-gオプションは、lesscコマンドをグローバルに利用できるようにインストールします。特定のバージョン(またはタグ)の場合は、パッケージ名の後に@VERSIONを追加できます。例:npm install less@2.7.1 -g

Node開発用インストール

または、コンパイラをグローバルに使用したくない場合は、以下の方法があります。

npm i less --save-dev

これは、lesscの最新の公式バージョンをプロジェクトフォルダにインストールし、プロジェクトのpackage.jsondevDependenciesにも追加します。

lesscのベータリリース

定期的に、新機能が開発されると、lesscビルドがnpmに公開され、ベータ版としてタグ付けされます。これらのビルドは、公式リリースの@latestとしては公開され**ず**、通常はバージョンにベータ版が含まれています(現在のバージョンを取得するには、lessc -vを使用してください)。

パッチリリースは破壊的変更がないため、すぐに公開されます。アルファ/ベータ/候補バージョンは、マイナーまたはメジャーバージョンアップグレードとして公開されます(1.4.0以降は、セマンティックバージョニングに従うよう努めています)。

サーバーサイドとコマンドラインの使い方

このリポジトリに含まれているバイナリ`bin/lessc`は、*nix、OS X、WindowsでNode.jsと連携します。

使用方法lessc [オプション option=パラメータ ...] <ソース> [出力先]

コマンドラインの使い方

lessc [option option=parameter ...] <source> [destination]

ソースが `-'(ダッシュまたはハイフンマイナス)に設定されている場合、入力はstdinから読み取られます。

bootstrap.lessをbootstrap.cssにコンパイルする

lessc bootstrap.less bootstrap.css

lessc特有のオプション

その他すべてのオプションについては、Lessオプションを参照してください。

サイレント

lessc -s lessc --silent

警告が表示されないようにします。

バージョン

lessc -v
lessc --version

ヘルプ

lessc --help
lessc -h

利用可能なオプションを含むヘルプメッセージを出力して終了します。

Makefile

lessc -M
lessc --depends

makefileのインポート依存関係リストをstdoutに出力します。

カラーなし

非推奨.

lessc --no-color

Clean CSS

less v2では、Clean CSSは直接の依存関係として含まれなくなりました。lesscでclean cssを使用するには、clean cssプラグインを使用してください。


ブラウザでの使い方

"using-less-in-the-browser"のMarkdownソースを編集する

ブラウザでLess.jsを使用するのが最も簡単な入門方法であり、Lessでの開発に便利です。ただし、パフォーマンスと信頼性が重要な本番環境では、Node.jsまたは利用可能な多くのサードパーティツールを使用してプリコンパイルすることをお勧めします。

開始するには、.lessスタイルシートをrel属性を "stylesheet/less"に設定してリンクします。

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

次に、less.jsをダウンロードし、ページの<head>要素にある<script></script>タグに含めます。

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

オプションの設定

スクリプトタグの**前**にlessオブジェクトに設定することで、プログラムでオプションを設定できます。これは、すべての初期リンクタグとLessのプログラムによる使用に影響します。

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

もう1つの方法は、スクリプトタグでオプションを指定することです。例:

<script>
  less = {
    env: "development"
  };
</script>
<script src="less.js" data-env="development"></script>

または、簡潔にするために、スクリプトタグとリンクタグの属性として設定できます。

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

ブラウザのサポート

Less.jsは、すべての最新のブラウザ(Chrome、Firefox、Safari、Edgeの最新バージョン)をサポートしています。本番環境でクライアントサイドのLessを使用することは可能ですが、そうすることでパフォーマンスに影響が出ることがあります(ただし、Lessの最新リリースはかなり高速です)。また、JavaScriptエラーが発生した場合、 cosmetic issuesが発生することがあります。これは、柔軟性と速度のトレードオフです。静的Webサイトで可能な限り高速なパフォーマンスを得るには、サーバーサイドでLessをコンパイルすることをお勧めします。

本番環境でクライアントサイドのlessを使用する理由があります。たとえば、ユーザーがテーマに影響を与える変数を調整できるようにし、それをリアルタイムで表示したい場合などです。この場合、ユーザーはスタイルが更新されるのを待ってから表示されることを心配しません。

ヒント

  • スタイルシートはスクリプトの**前**に必ず含めてください。
  • 複数の.lessスタイルシートをリンクすると、それぞれが個別にコンパイルされます。そのため、スタイルシートで定義した変数、mixin、または名前空間は、他のスタイルシートではアクセスできません。
  • ブラウザの同一オリジンポリシーにより、外部リソースを読み込むには、CORSを有効にする必要があります。

ウォッチモード

ウォッチモードを有効にするには、オプションenvdevelopmentに設定する必要があります。 less.jsファイルがインクルードされた**後**に、次のようにless.watch()を呼び出します。

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

または、URLに#!watchを追加することで、ウォッチモードを一時的に有効にすることができます。

変数の変更

Less変数のランタイム変更を有効にします。新しい値で呼び出されると、Lessファイルはリロードせずに再コンパイルされます。簡単な基本的な使用方法

less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});

デバッグ

ツールがルールのソースを特定できるようにするルールをCSSに出力することができます。

上記のようにオプションdumpLineNumbersを指定するか、URLに!dumpLineNumbers:mediaqueryを追加します。

FireLESSmediaqueryオプションを使用できます(SCSSメディアクエリデバッグ形式と同じです)。 FireLessとLess v2も参照してください。 commentオプションを使用すると、インラインコンパイルされたCSSコードにファイル情報と行番号を表示できます。

オプション

less.jsスクリプトを読み込む**前**に、グローバルなlessオブジェクトにオプションを設定します。

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    logLevel: 2,
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    globalVars: {
      var1: '"quoted value"',
      var2: 'regular value'
    },
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

ブラウザでのLess.js特有のオプション

その他すべてのオプションについては、Lessオプションを参照してください。

async

タイプ: Boolean

デフォルト: false

asyncオプションを使用してインポートファイルをリクエストするかどうか。 fileAsyncを参照してください。

env

タイプ: String デフォルト:ページのURLに依存

実行環境は、developmentまたはproductionのいずれかです。

本番環境では、CSSはローカルストレージにキャッシュされ、情報メッセージはコンソールに出力されません。

ドキュメントのURLがfile://で始まるか、ローカルマシン上にあるか、標準以外のポートを使用している場合、自動的にdevelopmentに設定されます。

例:

less = { env: 'production' };

errorReporting

タイプ: String

オプション: html|console|function

デフォルト: html

コンパイルに失敗した場合のエラー報告方法を設定します。

fileAsync

タイプ: Boolean

デフォルト: false

ファイルプロトコルを使用しているページで、インポートを非同期的にリクエストするかどうかを指定します。

functions (非推奨 - @pluginを使用してください)

型: object

ユーザー定義関数。名前をキーとして指定します。

less = {
    functions: {
        myfunc: function() {
            return less.Dimension(1);
        }
    }
};

ネイティブのLess関数のように使用できます。例:

.my-class {
  border-width: unit(myfunc(), px);
}

logLevel

型: Number

デフォルト: 2

JavaScriptコンソールへのログ出力レベル。注記: production 環境ではログは出力されません。

2 - Information and errors
1 - Errors
0 - Nothing

poll

型: Integer

デフォルト: 1000

監視モードでのポーリング間隔(ミリ秒)。

relativeUrls

タイプ: Boolean

デフォルト: false

必要に応じて、URLを相対パスに調整します。falseの場合、URLはエントリとなるlessファイルからの相対パスになります。

useFileCache

タイプ: Boolean

デフォルト: true (v2以前はfalse)

セッションごとのファイルキャッシュを使用するかどうか。lessファイルをキャッシュすることで、modifyVarsを呼び出した際にすべてのlessファイルを再度取得する必要がなくなります。watcherを使用するか、reloadをtrueに設定してrefreshを呼び出すと、実行前にキャッシュがクリアされます。


Less.js オプション

"less-options"のマークダウンソースを編集する

クロスプラットフォームオプション

インクルードパス

lessc --include-path=PATH1;PATH2 { paths: ['PATH1', 'PATH2'] }

@import ルールで指定されたファイルがその場所に存在しない場合、Lessはこのオプションに渡された場所を検索します。たとえば、Lessファイル内でシンプルに相対パスで参照したいライブラリへのパスを指定するために使用できます。

ルートパス

lessc -rp=resources/
lessc --rootpath=resources/
{ rootpath: 'resources/' }

生成されるすべてのインポートとURLにパスを追加できます。これは、処理されるLessのimport文には影響せず、出力CSSに残されるものだけに影響します。

たとえば、CSSで使用されるすべての画像がresourcesというフォルダにある場合、このオプションを使用してURLにパスを追加し、そのフォルダの名前を設定可能にすることができます。

URLの書き換え

lessc -ru=off
lessc --rewrite-urls=off
{ rewriteUrls: 'off' }
lessc -ru=all
lessc --rewrite-urls=all
{ rewriteUrls: 'all' }
lessc -ru=local
lessc --rewrite-urls=local
{ rewriteUrls: 'local' }

デフォルトではURLはそのまま(off)なので、サブディレクトリにある画像を参照するファイルをインポートすると、CSSにもまったく同じURLが出力されます。このオプションを使用すると、インポートされたファイルのURLを、Lessに渡されたベースファイルからの相対パスになるように書き換えることができます。例:

/* main.less */
@import "global/fonts.less";
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('myfont/myfont.woff2') format('woff2');
}

何も設定されていない場合、またはrewriteUrls: 'off'の場合、main.lessをコンパイルすると次のようになります。

/* main.less */
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('myfont/myfont.woff2') format('woff2');
}

rewriteUrls: 'all'の場合、次のようになります。

/* main.less */
/* global/fonts.less */
@font-face {
  font-family: 'MyFont';
  src: url('./global/myfont/myfont.woff2') format('woff2');
}

rewriteUrls: 'local'の場合、明示的に相対パスであるURL(.で始まるURL)のみが書き換えられます。

url('./myfont/myfont.woff2') /* becomes */ url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') /* stays */ url('myfont/myfont.woff2')

これは、Node.jsと同様の解決セマンティクスを使用するCSS ModulesとLessを組み合わせる場合に役立ちます。

このオプションの代わりに、画像をCSSに埋め込むdata-uri関数を使用することも検討できます。

算術演算

リリースバージョン v3.7.0

lessc -m=[option]
lessc --math=[option]
{ math: '[option]' }

Lessは、常に括弧を必要とする以前の`strictMath`設定と、すべての状況で算術演算を実行するデフォルト設定の中間に位置する機能を提供するために、算術演算オプションを再構築しました。

現在、値の間で"/"記号を広く使用しているCSSとの競合を減らすため、除算にのみ括弧を必要とする算術モードが追加されました。(Less 4ではこれがデフォルトです。)従来の動作はサポートされていますが、「厳密な算術演算」もより直感的に動作するように調整されています。

`math`で使用可能な4つのオプションは次のとおりです。

  • `always` (3.xのデフォルト) - Lessは積極的に算術演算を行います。
  • `parens-division` **(4.0のデフォルト)** - '/'演算子を使用した括弧の外では除算は実行されません(ただし、'./'演算子を使用すると括弧の外で「強制」できます - './'は非推奨です)。
  • `parens` | `strict` - すべての算術式に括弧が必要です。
  • `strict-legacy` (4.0で削除) - 場合によっては、式のいずれかの部分が評価できない場合、算術演算は評価されません。

**always** 例

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 2px ./ 2;
  d: (2px / 2);
}

出力

.math {
  a: 2;
  b: 1px;
  c: 1px;
  d: 1px;
}

parens-division

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 2px ./ 2;
  d: (2px / 2);
}

出力

.math {
  a: 2;
  b: 2px / 2;
  c: 1px;
  d: 1px;
}

strict

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

出力

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: 1px + 3px;
}

strict-legacy

従来の`strictMath`モードでは、括弧の外側の混合式は、括弧全体が評価されないことを意味します。(おそらくあなたが望むものではありません)。

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

出力

.math {
  a: 1 + 1;
  b: 2px / 2;
  c: (2px / 2) + (3px / 1);
}

厳密な算術演算(非推奨)

これはmathオプションに置き換えられました。

相対URL(非推奨)

lessc -ru
lessc --relative-urls
{ relativeUrls: true }

`rewriteUrls: "all"`に置き換えられました。

厳密な単位

lessc -su=on
lessc --strict-units=on
{ strictUnits: true }

デフォルトはoff/falseです。

このオプションがない場合、Lessは算術演算を行う際に、出力単位を推測しようとします。例えば

.class {
  property: 1px * 2px;
}

この場合、明らかに正しくありません。長さ×長さは面積になりますが、CSSは面積の指定をサポートしていません。そのため、ユーザーは値の1つを値にするつもりだったと想定し、長さの単位ではなく`2px`を出力します。

厳密な単位がオンの場合、これは計算のバグであると想定し、エラーをスローします。

IE8互換性(非推奨)

lessc --ie-compat { ieCompat: true }

v3.0.0以降、デフォルトはfalseです。現在、data-uri関数で使用されているだけで、ブラウザが処理できないほど大きな画像が作成されないようにします。

インラインJavaScriptの有効化(非推奨)

lessc --js { javascriptEnabled: true }

v3.0.0以降、デフォルトはfalseです。.lessファイルでインラインJavaScriptの評価を有効にします。これは、スタイルシートのユーザー入力に実行可能コードが含まれていることを予期していなかった一部の開発者にとって、セキュリティ上の問題を引き起こしました。

`@plugin`オプションに置き換えられました。

グローバル変数

lessc --global-var="color1=red" { globalVars: { color1: 'red' } }

このオプションは、ファイルから参照できる変数を定義します。事実上、宣言はベースとなるLessファイルの先頭に追加されます。つまり、使用できますが、この変数がファイル内で定義されている場合はオーバーライドすることもできます。

変数の変更

lessc --modify-var="color1=red" { modifyVars: { color1: 'red' } }

グローバル変数オプションとは対照的に、これはベースファイルの最後に宣言を配置します。つまり、Lessファイルで定義されているものはすべてオーバーライドされます。

URL引数

lessc --url-args="cache726357" { urlArgs: 'cache726357' }

このオプションを使用すると、すべてのURLに追加する引数を指定できます。これは、たとえばキャッシュバスティングに使用できます。

行番号(非推奨)

lessc --line-numbers=comments
lessc --line-numbers=mediaquery
lessc --line-numbers=all
{ dumpLineNumbers: 'comments' }

インラインソースマッピングを生成します。これは、ブラウザがソースマップをサポートするようになる前の唯一のオプションでした。

プリロードされたプラグイン

参照:プリロードされたプラグイン

Lint

lessc --lint -l { lint: true }

lessパーサーを実行し、出力なしでエラーのみを報告します。

圧縮(非推奨)

lessc --compress -x { compress: true }

lessに組み込まれた圧縮を使用して圧縮します。これは問題なく動作しますが、専用のCSS圧縮のすべてのトリックを利用しているわけではありません。一般的に、LessがCSSに変換された後にCSSをクリーンアップして圧縮するサードパーティツールを検討することをお勧めします。

安全でないHTTPSホストからのインポートを許可する

lessc --insecure { insecure: true }

ソースマップオプション

これらのオプションのほとんどは、ブラウザでLess.jsを使用する場合には適用されません。プリコンパイルされたLessファイルでソースマップを生成する必要があるためです。

ソースマップの生成

lessc --source-map { sourceMap: {} }

lessにソースマップを生成するように指示します。

ソースマップの出力ファイル名

lessc --source-map=file.map { sourceMap: { outputFilename: 'file.map' } }

ソースマップのルートパス

lessc --source-map-rootpath=dev-files/ { sourceMap: { sourceMapRootpath: 'dev-files/' } }

ソースマップ内の各lessファイルパスと、出力cssで指定されたマップファイルへのパスに、付加されるべきルートパスを指定します。

ベースパスはデフォルトで入力lessファイルのディレクトリになるため、ルートパスはデフォルトでソースマップ出力ファイルから入力lessファイルのベースディレクトリへのパスになります。

例えば、Webサーバーのルートに生成されたcssファイルがあり、ソースのless/css/mapファイルが別のフォルダにある場合に、このオプションを使用します。上記のオプションでは、次のようになります。

output.css
dev-files/output.map
dev-files/main.less

ソースマップのベースパス

lessc --source-map-basepath=less-files/ { sourceMap: { sourceMapBasepath: 'less-files/' } }

これはルートパスオプションの逆で、出力パスから削除するパスを指定します。たとえば、less-filesディレクトリでファイルをコンパイルしていますが、ソースファイルがWebサーバーのルートまたはカレントディレクトリで使用可能な場合は、これを指定してパスの追加のless-files部分を削除できます。

デフォルトでは、入力lessファイルへのパスになります。

ソースマップにLessソースを含める

lessc --source-map-include-source { sourceMap: { outputSourceFiles: true } }

このオプションは、すべてのLessファイルをソースマップに含める必要があることを指定します。つまり、元のソースにアクセスするには、マップファイルのみが必要になります。

これは、マップインラインオプションと組み合わせて使用​​して、追加の外部ファイルがまったく必要ないようにすることができます。

ソースマップのインライン化

lessc --source-map-inline { sourceMap: { sourceMapFileInline: true } }

このオプションは、マップファイルを出力CSSにインライン化する必要があることを指定します。これは本番環境には推奨されませんが、開発では、コンパイラが単一の出力ファイルを生成できます。これをサポートするブラウザでは、コンパイルされたcssを使用しますが、コンパイルされていないlessソースが表示されます。

ソースマップのURL

lessc --source-map-url=../my-map.json { sourceMap: { sourceMapURL: '../my-map.json' } }

マップファイルを指すcssのURLをオーバーライドできます。これは、rootpathおよびbasepathオプションが必要なものとまったく同じものを生成していない場合に備えています。


プリロードされたプラグイン

"plugins"のマークダウンソースを編集する

Less.jsでパースが開始される前にプラグインを読み込みます

プラグインを使用する最も簡単な方法は@pluginアットルールを使用することですが、Node.js環境では、コマンドラインまたはLessオプションで指定することにより、グローバルLess.jsプラグインをプリロードできます。

プリプロセッシング

Less.jsプリプロセッサを追加する場合、プラグインのプリロードが必要です。つまり、パースが開始される前に呼び出され、生のLessソースが渡されるプラグインです。この例としては、Sass-To-Lessプリプロセッサプラグインがあります。

注:_事前評価_プラグイン(Lessソースが解析された後、評価される前)には、プリロードは必要ありません。

Node.js

コマンドラインの使用

lesscを使用している場合、最初に行う必要があるのは、そのプラグインをインストールすることです。 NPMなどのレジストリでは、Less.jsプラグインを「less-plugin-」プレフィックス(検索を容易にするため)で登録することをお勧めしますが、これは必須ではありません。そのため、カスタムプラグインの場合、次のようにインストールする可能性があります

npm install less-plugin-myplugin

プラグインを使用するには、コマンドラインで次のように書くだけで渡すことができます

lessc --myplugin

Less.jsは、不明なLessオプション(「myplugin」など)があるときはいつでも、「less-plugin-myplugin」と「myplugin」モジュールの両方をプラグインとしてロードしようとします。

プラグインを明示的に指定することもできます

lessc --plugin=myplugin

プラグインにオプションを渡すには、2つの方法のいずれかで記述できます。

lessc --myplugin="advanced"
lessc --plugin=myplugin=advanced

Less.jsを介したプラグインの読み込み

Nodeでは、プラグインをrequireし、オプションpluginsとして配列でlessに渡します。例:

var LessPlugin = require('less-plugin-myplugin');
less.render(myCSS, { plugins: [LessPlugin] })
  .then(
    function(output) { },
    function(error) { }
  );

プログラムによる使用

"programmatic-usage"のマークダウンソースを編集する

lessへのメインエントリポイントは、less.render関数です。これは次の形式を取ります

less.render(lessInput, options)
    .then(function(output) {
        // output.css = string of css
        // output.map = string of sourcemap
        // output.imports = array of string filenames of the imports referenced
    },
    function(error) {
    });

// or...

less.render(css, options, function(error, output) {})

options引数はオプションです。コールバックを指定すると、promiseは返されません。コールバックを指定しないと、promiseが返されます。内部的には、lessを同期的に使用できるように、コールバックバージョンが使用されます。

ファイルをレンダリングする場合、最初に文字列に読み込んで(less.renderに渡すため)、optionsのfilenameフィールドをメインファイルのファイル名に設定します。 lessはインポートのすべての処理を処理します。

sourceMapオプションは、サブソースマップオプションを設定できるオブジェクトです。使用可能なサブオプションは、sourceMapURLsourceMapBasepathsourceMapRootpathoutputSourceFilessourceMapFileInlineです。 sourceMapオプションは、ブラウザコンパイラではless.jsで使用できないことに注意してください。

less.render(lessInput)
    .then(function(output) {
        // output.css = string of css
        // output.map = undefined
}
//,
less.render(lessInput, {sourceMap: {}})
    .then(function(output) {
        // output.css = string of css
        // output.map = string of sourcemap
}
//or,
less.render(lessInput, {sourceMap: {sourceMapFileInline: true}})
    .then(function(output) {
        // output.css = string of css \n /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJ..= */
        // output.map = undefined
}

ログへのアクセスを取得する

次のコードでログリスナーを追加できます

less.logger.addListener({
    debug: function(msg) {
    },
    info: function(msg) {
    },
    warn: function(msg) {
    },
    error: function(msg) {
    }
});

注:すべての関数はオプションです。エラーはログに記録されず、代わりにless.renderのコールバックまたはpromiseに返されます


Less.jsへの貢献

"developing-less"のマークダウンソースを編集する

貢献をご検討いただきありがとうございます!無駄な作業を避けるため、貢献の手順をよくお読みください。

これらのツールのインストール

パスが設定されていることを確認してください。お好みのコマンドラインを起動して「node -v」と入力すると、nodeコンパイラが表示されます。「phantomjs -v」を実行すると、phantomjsのバージョン番号が表示されます。

  • less.jsリポジトリをローカルにクローンします
  • ローカルのless.jsリポジトリに移動し、`npm install`を実行します。これにより、lessのnpm依存関係がインストールされます。

使用方法

Gruntは、テスト、ビルド、ベンチマークなどの開発コマンドを実行するために使用されます。 grunt-cliがグローバルにインストールされている場合はgrunt [command_name]で、そうでない場合はnpm run grunt -- [command_name]で実行できます。

Lessリポジトリのルートに移動すると、`npm test`(`npm run grunt -- test`の便利なエイリアス)を実行できるはずです。これはすべてのテストを実行します。ブラウザ専用の場合は、`npm run grunt -- browsertest`を実行します 現在のバージョンのlessをファイルに対して試してみたい場合は、ここから`node bin/lessc path/to/file.less`を実行します

ブラウザテストをデバッグするには、`npm run grunt -- browsertest-server`を実行し、http://localhost:8088/tmp/browser/にアクセスして、テストランナーページを表示します。

オプション:Lessコンパイラの最新バージョンを取得するには、`npm -g install less`を実行します。npmはnodeパッケージマネージャーであり、「-g」はグローバルに使用できるようにインストールします。

これで`lessc file.less`を実行できるようになり、適切な`file.less`が存在する場合はコンパイルされてstdoutに出力されます。次に、ローカルで実行した場合(`node bin/lessc file.less`)と比較できます。

その他のgruntコマンド

  • npm run grunt -- benchmark - ベンチマークテストを実行してパフォーマンスの数値を取得します。
  • npm run grunt -- stable - 新しいリリースを作成します。
  • npm run grunt -- readme - ルートディレクトリに新しいreadme.mdを生成します(各リリース後)。

他の環境でLessを実行する方法

libsフォルダを見ると、lessless-nodeless-browserがあります。 lessフォルダは、環境固有の記述を含まない純粋なJavaScriptです。 less/libs/lessをrequireすると、環境オブジェクトとファイルマネージャーの配列を引数にとる関数が取得できます。ファイルマネージャーは、プラグインとしても記述できるのと同じファイルマネージャーです。

var createLess = require("less/libs/less"),
    myLess = createLess(environment, [myFileManager]);

環境APIはless/libs/less/environment/environment-api.jsで、ファイルマネージャーAPIはless/libs/less/environment/file-manager-api.jsで指定されています。

ファイルマネージャーについては、プロトタイプを新しいAbstractFileManagerとして設定することを強くお勧めします。これにより、必要なものをオーバーライドすることができ、既存のファイルマネージャーを壊すことなく新しい関数を実装することができます。ファイルマネージャーの例については、2つのノード実装、ブラウザ実装、またはnpmインポートプラグイン実装を参照してください。

ガイド

http://www.gliffy.com/go/publish/4784259 を見ると、Lessの動作の概要図があります。警告!v2の変更に合わせて更新する必要があります。