Less.js用法
标签：minor text 运行时 filename log node 输入 中间 地图
命令行用法
使用命令行工具将
.less文件编译成.css文件。
当心！如果你不喜欢使用命令行，请了解更多有关 Less 图形界面工具 的信息。
安装
通过 npm 安装
npm install less -g
-g 参数表示将 lessc 命令安装到全局环境。对于特定版本（或 tag），你可以在软件包（package）名称后面添加 @VERSION ，例如 npm install less@2.7.1 -g。
针对 Node Development 配置段安装 Less
或者，如果你不想将编译器安装到全局环境，则可以
npm i less --save-dev
这将在项目文件夹中安装 lessc 的最新正式版本，并将其添加到 package.json 文件中的 devDependencies 配置段中。
lessc 的 Beta 版
随着新功能的不断开发，lessc 版本将发布到 npm，标记为 beta。这些内部版本 不会 作为 @latest 正式版本发布，并且通常会在该版本中包含 beta 标识（利用 lessc -v 命令获取当前版本号）。
由于 patch（补丁）版本是向后兼容的，因此我们将及时发布 patch 版本，alpha/beta/candidate 版本将作为 minor（次要）或 major（主要）版本进行发布并升级（从 1.4.0 版本开始，我们将努力遵循 语义化版本命名规范)。
服务器端和命令行用法
该仓库中包含的二进制文件 bin/lessc 能够在 *nix、OS X 和 Windows 平台上的 Node.js 上运行。
用法： lessc [option option=parameter ...] <source> [destination]
命令行用法
lessc [option option=parameter ...] <source> [destination]
如果 source 设置为 `-‘ （破折号或连字符减号），则从 stdin 读取输入。
示例
将 bootstrap.less 编译为 bootstrap.css
lessc bootstrap.less bootstrap.css
特定于 lessc 的参数
有关其他所有参数的信息，请参见 Less 参数列表。
无声
lessc -s lessc-无声
不显示任何警告信息。
版
lessc -v lessc --version
救命
lessc --help | |
lessc -h |
展示所有参数的帮助信息并退出。
生成文件
lessc -M lessc --depends
将makefile导入依赖项列表输出到stdout。
没有颜色
不推荐使用。
lessc --no-color
干净的CSS
在 v2 版本的 less 中，Clean CSS 不再作为直接依赖项而存在。如需将 clean css 与 lessc 一起使用，请使用 clean css 插件。
浏览器使用情况Browser Usage
在浏览器中使用Less.js是最简单的入门方法，并且是使用Less进行开发的便捷方法，但是在生产中，当性能和可靠性很重要时，我们建议使用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>
Setting Options
您可以以编程方式设置选项，方法是将其设置在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>另一种方法是在脚本标签上指定选项，例如
<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">Browser Support
Less.js支持所有现代浏览器（Chrome，Firefox，Safari，IE11 +和Edge的最新版本）。尽管可以在生产中的客户端上使用Less，但是请注意这样做可能会对性能产生影响（尽管Less的最新版本要快得多）。此外，如果发生JavaScript错误，有时还会出现外观问题。这是灵活性与速度之间的权衡。为了使静态网站获得最快的性能，我们建议在服务器端编译Less。
有一些原因可以减少在生产中使用客户端，例如，如果您要允许用户调整会影响主题的变量，并希望实时向他们显示该主题，在这种情况下，用户不必担心等待样式更新，然后再查看。
Tips
确保在脚本之前包含样式表。
链接多个
.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，mixin或名称空间均不可访问。由于浏览器的原始策略相同，因此加载外部资源需要启用CORS
Watch Mode
要启用观看模式，env必须将选项设置为development。然后，在包含less.js文件之后，调用less.watch()，如下所示：
<script>less = { env: ‘development‘};</script>
<script src="less.js"></script>
<script>less.watch();</script>或者，您可以通过附加#!watch到URL来临时启用“监视”模式。
Modify Variables
启用运行时修改Less变量。当使用新值调用时，Less文件将重新编译而无需重新加载。简单的基本用法：
less.modifyVars({
‘@buttonFace‘: ‘#5B83AD‘,
‘@buttonText‘: ‘#D9EEF2‘
});Debugging
可以在CSS中输出规则，允许工具查找规则的来源。
指定dumpLineNumbers上面的选项或添加!dumpLineNumbers:mediaquery到URL。
您可以将该mediaquery选项与FireLESS一起使用（与SCSS媒体查询调试格式相同）。另请参阅FireLess和Less v2。该comment选项可用于在嵌入式编译的CSS代码中显示文件信息和行号。
Options
在加载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的选项 Options specific to Less.js in the browser
有关所有其他选项，请参见“较少选项”。
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
在具有文件协议的页面中时是否异步请求导入。
函数（不建议使用-使用@plugin） functions (Deprecated - use @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已相对于少入口文件相对。
useFileCache
类型： Boolean
默认值：（true以前false在v2之前）
是否使用每个会话文件缓存。这会缓存较少的文件，以便您可以调用ModifyVars，并且不会再次检索所有较少的文件。如果您使用监视程序或在reload设置为true的情况下调用refresh，则将在运行之前清除缓存。
Less.js选项
跨平台参数
Include Paths
lessc --include-path=PATH1;PATH2 | { paths: [‘PATH1‘, ‘PATH2‘] } |
如果@import规则中的文件不存在于该确切位置，则Less会在传递给此选项的位置处查找该文件。例如，您可以使用它来指定要在Less文件中相对简单地引用的库的路径。
Rootpath
lessc -rp=resources/ lessc --rootpath=resources/ | { rootpath: ‘resources/‘ } |
允许您为CSS中每个生成的导入和url添加路径。这不会影响处理的Less导入语句，只会影响输出CSS中剩下的那些。
例如，如果css使用的所有图像都在名为resources的文件夹中，则可以使用此选项将其添加到URL上，然后使该文件夹的名称可配置。
Rewrite URLs
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，以便该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‘)
如果您要将Less与CSS模块结合使用，这会很有用，这些CSS模块使用类似Node.js的类似解析语义。
您可能还需要考虑使用data-uri函数而不是此选项，该功能会将图像嵌入到CSS中。
Math
发布了v3.7.0
lessc -m=[option] lessc --math=[option] | { math: ‘[option]‘ } |
Less重建了数学选项，以在先前strictMath设置（始终需要加括号）和默认设置（在所有情况下都执行数学运算）之间提供中间功能。
为了减少与CSS的冲突，CSS现在/在值之间广泛使用符号，现在存在一种数学模式，该模式只需要用括号进行除法即可。尽管支持传统行为，但也对“严格数学”进行了调整，使其操作更直观。
适用于的选项为math：
always（当前默认设置）-少做数学parens-division（未来的默认设置） -使用/运算符不会在paren外部执行除法操作（但可以使用运算符在“ parens”外部“强制除法”./）parens|strict-更直观的遗产形式strictMath: truestrict-legacy（已弃用）-就像命名的那样，操作与current完全相同strictMath: true，不同的是width: -(1);（parens中的单个尺寸值）现在将输出width: -1;vswidth: -(1)
总是 示例：
.math {
a: 1 + 1;
b: 2px / 2;
c: 2px ./ 2;
d: (2px / 2);
}输出：
.math {
a: 2;
b: 1px;
c: 1px;
d: 1px;
}分区
例：
.math {
a: 1 + 1;
b: 2px / 2;
c: 2px ./ 2;
d: (2px / 2);
}输出：
.math {
a: 2;
b: 2px / 2;
c: 1px;
d: 1px;
}严格
.math {
a: 1 + 1;
b: 2px / 2;
c: (2px / 2) + (3px / 1);
}输出：
.math {
a: 1 + 1;
b: 2px / 2;
c: 1px + 3px;
}严格遗产
在传统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选项已替换为该选项。
相对网址（不建议使用）
lessc -ru lessc --relative-urls | { relativeUrls: true } |
已替换为 rewriteUrls: "all"
Strict Units
lessc -su=on lessc --strict-units=on | { strictUnits: true } |
默认为关闭/错误。
如果没有此选项，则在进行数学运算时，较少尝试猜测输出单元。例如
.class {
property: 1px * 2px;
}在这种情况下，事情显然是不对的-长度乘以长度会得到一个面积，但是css不支持指定面积。因此，我们假设用户将其中一个值表示为一个值，而不是长度单位，然后输出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文件中定义的所有内容。
网址参数
lessc --url-args="cache726357" | { urlArgs: ‘cache726357‘ } |
此选项使您可以指定一个参数，以继续每个URL。例如，这可用于缓存清除。
行号（已弃用）
lessc --line-numbers=comments lessc --line-numbers=mediaquery lessc --line-numbers=all | { dumpLineNumbers: ‘comments‘ } |
生成内联源映射。这是浏览器开始支持源地图之前的唯一选项。
预装插件
另请：预加载插件
皮棉
lessc --lint -l | { lint: true } |
运行较少的解析器，仅报告错误，而没有任何输出。
压缩（不建议使用）
lessc --compress -x | { compress: true } |
使用较少的内置压缩进行压缩。这做得不错，但没有利用专用CSS压缩的所有技巧。通常，我们建议您在Less转换为CSS之后，使用第三方工具来清理和压缩CSS。
允许从不安全的HTTPS主机导入
lessc --insecure | { insecure: true } |
Source Map Options
这些选项中的大多数不适用于在浏览器中使用Less.js，因为您应该使用预编译的Less文件生成源映射。
生成源地图
lessc --source-map | { sourceMap: {} } |
少说生成源图。
源映射输出文件名
lessc --source-map=file.map | { sourceMap: { outputFilename: ‘file.map‘ } } |
源图根路径
lessc --source-map-rootpath=dev-files/ | { sourceMap: { sourceMapRootpath: ‘dev-files/‘ } } |
指定一个根路径，该根路径应附加到源映射中的每个较少的文件路径之前，也应附加至输出css中指定的映射文件的路径。
因为基本路径默认为输入少文件的目录，所以根路径默认为从源映射输出文件到输入少文件的基本目录的路径。
例如，如果您在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/‘ } } |
这与rootpath选项相反，它指定应从输出路径中删除的路径。例如，如果要在less-files目录中编译文件，但是源文件将在Web服务器上的根目录或当前目录中可用，则可以指定此项以删除less-files路径的其他部分。
它默认为少输入文件的路径。
在源图中包含较少的源
lessc --source-map-include-source | { sourceMap: { outputSourceFiles: true } } |
此选项指定我们应将所有Less文件都包含在源图中。这意味着您只需要地图文件即可到达原始源。
可以将其与map inline选项结合使用，因此您根本不需要任何其他外部文件。
源地图内联地图
lessc --source-map-inline | { sourceMap: { sourceMapFileInline: true } } |
此选项指定映射文件应在输出CSS中内联。不建议将其用于生产，但要进行开发，它允许编译器生成一个输出文件，该文件在支持该文件的浏览器中使用已编译的CSS，但会向您显示未编译的较少源代码。
源地图URL
lessc --source-map-url=../my-map.json | { sourceMap: { sourceMapURL: ‘../my-map.json‘ } } |
允许您覆盖css中指向地图文件的URL。这是针对rootpath和basepath选项未完全产生所需内容的情况。
预装插件 Pre-Loaded Plugins
在 Less.js 开始解析之前加载插件
使用插件的最简单方式是使用 @plugin 规则，在 Node.js 环境中，你可以通过命令行或在 Less 参数中指定需要预加载的全局 Less.js 插件。
预处理
如果要添加 Less.js 预处理器，则必须预加载插件。也就是说，在 Less 源码被解析之前，插件就被调用并接收到 Less 源码。例如 Sass-To-Less 预处理器插件。
注意： 预加载对于 pre-evaluation（预求值） 插件不是必须的（只要在 Less 源码被解析之后，且在被求值之前即可）。
Node.js
使用命令行
如果你使用的是 lessc，则要做的第一件事就是安装该插件。在 NPM 之类的注册表中，我们建议将 Less.js 插件注册为带有 "less-plugin-" 前缀的插件名（以便于搜索），虽然这不是必需的。然后，对于自定义插件，就可以以如下方式安装：
npm install less-plugin-myplugin
要使用该插件，你可以在命令行中通过以下指定即可：
lessc --myplugin
每当存在未知的 Less 参数时（例如 "myplugin"），Less.js 就会尝试将 "less-plugin-myplugin" 模块和 "myplugin" 模块作为插件加载。
你还可以使用以下命令显式指定插件：
lessc --plugin=myplugin
要将参数传递给插件，你可以使用以下两种方法之一。
lessc --myplugin="advanced" lessc --plugin=myplugin=advanced
通过 Less.js 加载插件
在 Node 中，需要通过 require 指令加载插件并将其作为插件参数数组传递给 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参数是可选的。如果您指定回调，则不会返回承诺，就好像您未指定回调一样，也会给出承诺。在后台，使用了回调版本，因此可以同步使用更少的版本。
如果要渲染文件，则首先将其读入字符串（传递给less.render），然后将options的filename字段设置为主文件的文件名。较少将处理所有进口加工。
该sourceMap选项是使您可以设置子源地图选项的对象。可用的子选项有：sourceMapURL，sourceMapBasepath，sourceMapRootpath，outputSourceFiles和sourceMapFileInline。请注意，该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。
标签：minor text 运行时 filename log node 输入 中间 地图
原文地址：https://www.cnblogs.com/Huang-ze/p/14335450.html