命令行用法

Edit the markdown source for "command-line-usage"

编译.less文件到.css使用命令行

注意！如果您不擅长使用命令行，请详细了解更少的 GUI。

安装

安装npm

npm install less -g

这-g选项安装lessc命令全局可用。对于特定版本（或标签），您可以添加@VERSION在我们的包名称之后，例如npm install less@2.7.1 -g。

安装 Node 开发

或者，如果你不想全局使用编译器，你可能会

npm i less --save-dev

这将在您的项目文件夹中安装最新的官方版本的 lessc，并将其添加到devDependencies在你的项目中package.json。

lessc 的 Beta 版本

随着新功能的开发，lessc 版本会定期发布到 npm，并标记为 beta 版本。这些版本将不是出版为@latest正式发布，并且通常会在版本中包含测试版（使用lessc -v获取当前版本）。

由于补丁版本不会中断，我们将立即发布补丁版本，并且 alpha/beta/候选版本将作为次要或主要版本升级发布（我们努力从 1.4.0 开始遵循语义版本控制）。

服务器端和命令行使用

此存储库中包含的二进制文件，bin/lessc适用于Node.js在 *nix、OS X 和 Windows 上。

用法：lessc [option option=parameter ...] <source> [destination]

命令行用法

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

如果源设置为“-”（破折号或连字符减号），则从标准输入读取输入。

示例

将 bootstrap.less 编译为 bootstrap.css

lessc bootstrap.less bootstrap.css

特定于lessc

对于所有其他选项，请参阅更少选项。

沉默的

lessc -s lessc --silent

停止显示任何警告。

版本

lessc -v
lessc --version

帮助
lessc --help
lessc -h

打印带有可用选项的帮助消息并退出。

Makefile

lessc -M
lessc --depends

将 makefile 导入依赖项列表输出到 stdout。

无颜色

已弃用。

lessc --no-color

干净的 CSS

在 less v2 中，Clean CSS 不再作为直接依赖项包含在内。要将 clean css 与 lessc 一起使用，请使用清洁CSS插件。


浏览器使用情况

Edit the markdown source for "using-less-in-the-browser"

在浏览器中使用 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>

设置选项

您可以通过编程方式设置选项，通过在较小的对象上设置它们前脚本标签——这会影响所有初始链接标签和 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>

另一种方法是在脚本标签上指定选项，例如

<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 错误，有时可能会出现外观问题。这是灵活性与速度之间的权衡。为了获得静态网站的最佳性能，我们建议在服务器端编译 Less。

在生产中较少使用客户端是有原因的，比如，如果您想允许用户调整会影响主题的变量，并且您想实时向他们显示它 - 在这种情况下，用户不必担心等待样式更新后才能看到它。

尖端

  • 确保包含样式表前講劇。
  • 当你链接多个.less每个样式表都是独立编译的。因此，在一个样式表中定义的任何变量、混合宏或命名空间都无法在其他样式表中访问。
  • 由于浏览器的同源策略，加载外部资源需要启用 CORS

观看模式

要启用监视模式，选项env必须设置为development然后在包含 less.js 文件后，调用less.watch()， 像这样：

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

或者，您可以通过附加#!watch到 URL。

修改变量

允许在运行时修改 Less 变量。使用新值调用时，Less 文件会重新编译，而无需重新加载。简单的基本用法：

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

调试

可以在 CSS 中输出规则，以便工具定位规则的来源。

指定选项dumpLineNumbers如上所述或添加!dumpLineNumbers:mediaquery到网址。

您可以使用mediaquery选择无火（它与 SCSS 媒体查询调试格式相同）。另请参阅FireLess 和 Less v2。 这comment选项可用于在内联编译的 CSS 代码中显示文件信息和行号。

选项

在全局中设置选项less目的前加载 less.js 脚本：

<!-- 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 的选项

对于所有其他选项，请参阅更少选项。

异步

类型：Boolean

默认：false

是否使用异步选项请求导入文件。请参阅文件异步。

环境

类型：String默认值：取决于页面 URL

运行环境可以是development或者production。

在生产中，您的 css 会缓存在本地存储中，并且信息消息不会输出到控制台。

如果文档的 URL 以file://或者位于本地计算机上或具有非标准端口，它将自动设置为development。

例如

less = { env: 'production' };

错误报告

类型：String

选项：html|console|function

默认：html

设置编译失败时的错误报告方式。

文件异步

类型：Boolean

默认：false

当页面中有文件协议时，是否异步请求导入。

函数（已弃用 - 使用@plugin）

类型：object

用户功能，按名称键入。

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

它可以像原生 Less 函数一样使用，例如

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

日志级别

类型：Number

默认值：2

JavaScript 控制台中的日志记录量。注意：如果您在production环境中您将不会获得任何日志。

2 - Information and errors
1 - Errors
0 - Nothing

轮询

类型：Integer

默认：1000

监视模式下轮询之间的时间量（以毫秒为单位）。

相对网址

类型：Boolean

默认：false

可选地将 URL 调整为相对路径。如果设置为 false，则 URL 已经相对于无条目文件。

使用文件缓存

类型：Boolean

默认：true（之前false在 v2 之前）

是否使用每个会话的文件缓存。这会缓存 Less 文件，以便您可以调用 modifyVars 时无需再次检索所有 Less 文件。如果您使用观察程序或调用 refresh 并将 reload 设置为 true，则缓存将在运行前清除。


Less.js 选项

Edit the markdown source for "less-options"

跨平台选项

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

如果文件@import如果规则在该确切位置不存在，Less 会在传递给此选项的位置查找该规则。例如，您可以使用此选项来指定一个库的路径，以便 Less 文件中以简单且相对的方式引用该库。

根路径
lessc -rp=resources/
lessc --rootpath=resources/		 { rootpath: 'resources/' }

允许您在 CSS 中为每个生成的导入和 URL 添加路径。这不会影响 Less 已处理的导入语句，只会影响输出 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，以便 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('./myfont/myfont.woff2') /* becomes */ url('./global/myfont/myfont.woff2')
url('myfont/myfont.woff2') /* stays */ url('myfont/myfont.woff2')

如果你将 Less 与CSS 模块它使用与 Node.js 类似的解析语义。

您可能还想考虑使用 data-uri 函数代替此选项，它会将图像嵌入到 css 中。

数学

发布 v3.7.0
lessc -m=[option]
lessc --math=[option]		 { math: '[option]' }

Less 重新构建了数学选项，以提供介于之前的strictMath设置，始终需要括号，以及默认值，在所有情况下执行数学运算。

为了减少与 CSS 的冲突，CSS 现在大量使用/值之间的符号，现在有一个数学模式仅有的除法需要括号。（这现在是 Less 4 中的默认设置。）“严格数学”也进行了调整，使其操作更加直观，尽管仍然支持旧版行为。

有四种选择math是：

  • always（3.x 默认）- Less 急切地进行数学运算
  • parens-division （4.0 默认）- 在括号外不进行除法/运算符（但可以“强制”在括号之外使用./操作员 -./已弃用）
  • parens|strict- 所有数学表达式都需要括号。
  • strict-legacy（在 4.0 中删除） - 在某些情况下，如果表达式的任何部分无法求值，则不会对数学进行求值。

总是例子：

.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选项。

相对 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 不支持指定面积。因此，我们假设用户想要的是值，而不是长度单位，并输出2px。

在严格单位的情况下，我们假设这是计算中的一个错误并抛出一个错误。

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' } }

与全局变量选项相反，这会将声明放在基础文件的末尾，这意味着它将覆盖 Less 文件中定义的任何内容。

URL 参数
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 }

使用 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 中指定的映射文件路径前面的根路径。

因为 basepath 默认为输入 less 文件的目录，所以 rootpath 默认为从 sourcemap 输出文件到输入 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/' } }

这与 rootpath 选项相反，它指定应从输出路径中删除的路径。例如，如果您正在 less-files 目录中编译文件，但源文件将位于 Web 服务器上的根目录或当前目录中，则可以指定此选项以删除额外的less-files路径的一部分。

它默认为无输入文件的路径。

在源映射中包含较少的源
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 选项无法准确生成所需内容的情况。


预加载插件

Edit the markdown source for "plugins"

在 Less.js 中解析开始之前加载插件

虽然使用插件最简单的方法是使用@plugin规则在 Node.js 环境中，您可以通过命令行或在更少的选择。

预处理

如果要添加 Less.js 预处理器，则需要预加载插件。也就是说，在解析开始之前，插件就会被调用并传递原始的 Less 源代码。例如，Sass-To-Less 预处理器插件。

注意：无需预加载预评估插件（在 Less 源解析之后，但在评估之前）。

Node.js

使用命令行

如果您使用的是 lessc，那么首先需要安装该插件。在 NPM 等注册中心中，我们建议使用“less-plugin-”前缀注册 Less.js 插件（以便于搜索），但这不是必需的。因此，对于自定义插件，您可以使用以下命令安装：

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 中，需要插件并将其传递给less以数组形式作为选项插件。例如

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

程序化使用

Edit the markdown source for "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），然后将选项上的文件名字段设置为主文件的文件名。less 将处理所有导入的处理。

这sourceMapoption 是一个对象，用于设置子 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。


API

Edit the markdown source for "api"

即将推出


为 Less.js 做贡献

Edit the markdown source for "developing-less"

感谢您考虑贡献！请阅读贡献说明小心操作以避免浪费工作。

安装这些工具

确保路径已设置。如果您启动您最喜欢的命令行并输入node -v你应该会看到 Node 编译器。如果你运行phantomjs -v您应该看到 phantomjs 版本号。

  • 在本地克隆你的 less.js 存储库
  • 导航到本地 less.js 存储库并运行npm install这将安装 less 的 npm 依赖项。

用法

咕噜声用于运行开发命令，例如测试、构建和基准测试。您可以使用grunt [command_name]如果你有grunt-cli全局安装或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 是节点包管理器，“-g”安装它以供全局使用。

你现在应该可以这样做lessc file.less如果有合适的file.less然后它将被编译并输出到标准输出。然后你可以将其与在本地运行进行比较（node bin/lessc file.less）。

其他 grunt 命令

  • npm run grunt -- benchmark- 运行我们的基准测试来获取一些性能数据
  • npm run grunt -- stable创建新版本
  • npm run grunt -- readme在根目录中生成一个新的 readme.md（每次发布后）

如何在其他环境中减少运行次数

如果你查看 libs 文件夹，你会看到less，less-node，less-browser。 这less文件夹是纯 JavaScript，没有环境细节。如果你需要less/libs/less，您将获得一个函数，该函数接受一个环境对象和一个文件管理器数组作为参数。这些文件管理器与可以编写为插件的文件管理器相同。

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 ——这样您可以覆盖所需的功能，并允许我们在不破坏现有文件管理器的情况下实现新功能。有关文件管理器的示例，请参阅两个 Node 实现：浏览器实现或 npm 导入插件实现。

指导

如果你看看http://www.gliffy.com/go/publish/4784259这是 Less 工作原理的概览图。警告！它需要根据 v2 版本的变化进行更新。