Открыть оригинал markdown source для "less-options"
Пути поиска для @import
|
|
lessc --include-path=PATH1;PATH2 |
{ paths: ['PATH1', 'PATH2'] } |
Если файл из директивы @import не найден по указанному пути, Less продолжит искать его в каталогах, переданных через эту опцию. Это удобно, например, когда вы хотите подключать библиотеку короткими относительными путями, не дублируя длинные директории в каждом Less-файле.
rootpath
|
|
lessc -rp=resources/
lessc --rootpath=resources/ |
{ rootpath: 'resources/' } |
Позволяет добавить префикс ко всем сгенерированным импортам и URL в итоговом CSS. На уже обработанные Less-импорты это не влияет - только на те URL и импорты, которые остаются в выходном 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('./myfont/myfont.woff2') url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') url('myfont/myfont.woff2')
Это бывает полезно, если вы используете Less вместе с CSS Modules, где логика разрешения путей похожа на Node.js.
В ряде случаев вместо этой опции стоит рассмотреть функцию data-uri, которая встраивает изображение прямо в CSS.
math
Появилась в v3.7.0
|
|
lessc -m=[option]
lessc --math=[option] |
{ math: '[option]' } |
В Less переработали математические режимы, чтобы появился промежуточный вариант между старым strictMath, где почти везде требовались скобки, и прежним поведением по умолчанию, где вычисления выполнялись слишком охотно.
Поскольку в современном CSS символ / часто используется как разделитель значений, появился режим, где скобки обязательны только для деления. Начиная с Less 4 это и есть поведение по умолчанию. Режим "строгой математики" тоже скорректировали, чтобы он вел себя понятнее, хотя старый вариант для совместимости какое-то время сохранялся.
Доступны четыре значения math:
always - поведение по умолчанию в Less 3.x; Less вычисляет выражения максимально активно.parens-division - поведение по умолчанию в Less 4; деление через / выполняется только внутри скобок. Вне скобок можно было форсировать вычисление через ./, но этот синтаксис устарел.parens или strict - скобки обязательны для любых математических выражений.strict-legacy - старое поведение strictMath; в Less 4 удалено.
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);
}
strictMath (устарело)
Эта настройка заменена опцией math.
Относительные URL (устарело)
|
|
lessc -ru
lessc --relative-urls |
{ relativeUrls: true } |
Заменено на rewriteUrls: "all".
Строгие единицы измерения
|
|
lessc -su=on
lessc --strict-units=on |
{ strictUnits: true } |
По умолчанию эта опция выключена.
Без нее Less пытается угадать, какая единица должна получиться в результате вычисления. Например:
.class {
property: 1px * 2px;
}
Очевидно, здесь что-то не так: длина, умноженная на длину, дает площадь, а CSS не умеет работать с площадями как с типом значения. Поэтому по умолчанию Less предполагает, что одно из значений пользователь имел в виду просто как число, и выводит 2px.
Если включить строгие единицы, Less сочтет это ошибкой вычисления и завершится с ошибкой.
Совместимость с IE8 (устарело)
|
|
lessc --ie-compat |
{ ieCompat: true } |
Начиная с v3.0.0 по умолчанию false. Сейчас эта опция используется только функцией data-uri, чтобы не генерировать слишком большие изображения для старых браузеров.
Встроенный JavaScript (устарело)
|
|
lessc --js |
{ javascriptEnabled: true } |
Начиная с v3.0.0 по умолчанию false. Эта настройка разрешала выполнять встроенный JavaScript внутри .less-файлов. Для части разработчиков это создавало проблему безопасности: они не ожидали, что пользовательские стили могут содержать исполняемый код.
Заменено на @plugin.
Глобальные переменные
|
|
lessc --global-var="color1=red" |
{ globalVars: { color1: 'red' } } |
Эта опция определяет переменную, доступную внутри файла. По сути, объявление подставляется в начало базового Less-файла. Значит, переменную можно использовать, но если она определена и в самом файле, локальное значение сможет ее переопределить.
Изменяемые переменные
|
|
lessc --modify-var="color1=red" |
{ modifyVars: { color1: 'red' } } |
В отличие от globalVars, это объявление подставляется в конец базового файла и потому переопределяет все, что уже было объявлено в Less-коде.
Аргументы URL
|
|
lessc --url-args="cache726357" |
{ urlArgs: 'cache726357' } |
Позволяет дописать аргумент ко всем URL. Обычно используется для cache busting.
Номера строк (устарело)
|
|
lessc --line-numbers=comments
lessc --line-numbers=mediaquery
lessc --line-numbers=all |
{ dumpLineNumbers: 'comments' } |
Генерирует встроенную привязку к исходнику. До появления полноценной поддержки sourcemaps в браузерах это был основной способ отладки.
Предзагруженный плагин
См. раздел Предзагруженные плагины.
lint
|
|
lessc --lint -l |
{ lint: true } |
Запускает парсер Less и просто сообщает об ошибках, не создавая выходной файл.
compress (устарело)
|
|
lessc --compress -x |
{ compress: true } |
Включает встроенное сжатие Less. Оно работает приемлемо, но все же уступает специализированным CSS-минификаторам. Обычно лучше сначала скомпилировать Less в CSS, а затем прогнать результат через отдельный инструмент для очистки и сжатия.
Разрешить импорты с небезопасных HTTPS-хостов
|
|
lessc --insecure |
{ insecure: true } |
Опции source map
Большинство этих настроек не имеют смысла при использовании Less.js прямо в браузере: sourcemap обычно создается на этапе предварительной компиляции Less-файлов.
Создать source map
|
|
lessc --source-map |
{ sourceMap: {} } |
Включает генерацию source map.
Имя выходного файла source map
|
|
lessc --source-map=file.map |
{ sourceMap: { outputFilename: 'file.map' } } |
sourceMapRootpath
|
|
lessc --source-map-rootpath=dev-files/ |
{ sourceMap: { sourceMapRootpath: 'dev-files/' } } |
Задает корневой путь, который будет добавлен ко всем путям Less-файлов внутри source map, а также к пути до самого map-файла, указанному в выходном CSS.
Поскольку basepath по умолчанию равен каталогу входного Less-файла, rootpath по умолчанию рассчитывается как путь от итогового source map-файла до базового каталога входного файла.
Эта опция полезна, например, если CSS генерируется в корне веб-сервера, а исходные Less-, CSS- и map-файлы лежат в другой директории. Тогда структура может выглядеть так:
output.css
dev-files/output.map
dev-files/main.less
sourceMapBasepath
|
|
lessc --source-map-basepath=less-files/ |
{ sourceMap: { sourceMapBasepath: 'less-files/' } } |
Это настройка, обратная rootpath: она указывает путь, который нужно удалить из выходных путей. Например, если вы компилируете файл внутри каталога less-files, но на веб-сервере исходники должны быть доступны из корня или текущего каталога, этой опцией можно убрать лишний фрагмент less-files из пути.
По умолчанию используется путь к входному Less-файлу.
Включить исходный Less-код в source map
|
|
lessc --source-map-include-source |
{ sourceMap: { outputSourceFiles: true } } |
При включении этой опции все Less-файлы встраиваются в source map. То есть для доступа к исходникам вам будет достаточно самого map-файла.
Эту настройку можно сочетать с inline-картой, чтобы вообще не держать дополнительных внешних файлов.
Встроенная source map
|
|
lessc --source-map-inline |
{ sourceMap: { sourceMapFileInline: true } } |
Указывает, что map-файл должен быть встроен прямо в выходной CSS. Для production это обычно не рекомендуется, но в разработке удобно: компилятор создает один файл, который в поддерживающих браузерах использует уже собранный CSS, но при этом позволяет видеть исходный Less-код.
URL source map
|
|
lessc --source-map-url=../my-map.json |
{ sourceMap: { sourceMapURL: '../my-map.json' } } |
Позволяет переопределить URL в CSS, указывающий на map-файл. Это полезно в случаях, когда комбинации rootpath и basepath недостаточно, чтобы получить нужный путь.