"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に渡されたベースファイルからの相対パスになるように書き換えることができます。例:
@import "global/fonts.less";
@font-face {
font-family: 'MyFont';
src: url('myfont/myfont.woff2') format('woff2');
}
何も設定されていない場合、またはrewriteUrls: 'off'
の場合、main.less
をコンパイルすると次のようになります。
@font-face {
font-family: 'MyFont';
src: url('myfont/myfont.woff2') format('woff2');
}
rewriteUrls: 'all'
の場合、次のようになります。
@font-face {
font-family: 'MyFont';
src: url('./global/myfont/myfont.woff2') format('woff2');
}
rewriteUrls: 'local'
の場合、明示的に相対パスであるURL(.
で始まるURL)のみが書き換えられます。
url('./myfont/myfont.woff2') url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') 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オプションが必要なものとまったく同じものを生成していない場合に備えています。