命令行用法

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

小心！如果您不喜欢使用命令行，请了解有关Less的GUI的更多信息。

正在安装

用npm安装

npm install less -g

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

安装进行节点开发

另外，如果您不想全局使用编译器，则可能需要

npm i less --save-dev

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

Lessc的Beta版本

随着新功能的不断开发，lessc版本将发布到npm，标记为beta。这些内部版本不会作为@latest正式版本发布，通常会在该版本中包含Beta（用于lessc -v获取最新版本）。

由于补丁程序的发布是不间断的，因此我们将立即发布补丁程序的发布，并且alpha / beta /候选版本将作为次要或主要版本升级发布（从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

有关所有其他选项，请参见“ 较少选项”。

无声

lessc -s lessc-无声

停止显示任何警告。

版

lessc -v
lessc --version

帮帮我
lessc --help
lessc -h

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

生成文件

lessc -M
lessc --depends

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

没有颜色

不推荐使用。

lessc --no-color

干净的CSS

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


浏览器使用情况

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

设定选项

您可以以编程方式设置选项，方法是将其设置在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">

浏览器支持

Less.js支持所有现代浏览器（Chrome，Firefox，Safari，IE11 +和Edge的最新版本）。虽然可以在生产中的客户端上使用Less，但是请注意这样做可能会对性能产生影响（尽管Less的最新版本要快得多）。此外，如果发生JavaScript错误，有时还会出现外观问题。这是灵活性与速度之间的权衡。为了使静态网站获得最快的性能，我们建议在服务器端编译Less。

有一些原因可以减少在生产中使用客户端，例如，如果您希望允许用户调整会影响主题的变量，并希望实时向他们显示该主题，在这种情况下，用户不必担心等待样式更新，然后再查看。

提示

  • 确保在脚本之前包含样式表。
  • 链接多个.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，mixin或名称空间均不可访问。
  • 由于浏览器的原始策略相同，因此加载外部资源需要启用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到URL。

您可以将mediaquery选项与FireLESS一起使用（与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的选项

有关所有其他选项，请参见“ 较少选项”。

异步的

类型： Boolean

默认： false

是否使用async选项请求导入文件。参见fileAsync。

环保

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

要运行的环境可以是development或production。

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

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

例如

less = { env: 'production' };

错误报告

类型： String

选项：html| console|function

默认： html

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

fileAsync

类型： Boolean

默认： false

在具有文件协议的页面中时是否异步请求导入。

函数（不建议使用-使用@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

轮询

类型： Integer

默认： 1000

在监视模式下，两次轮询之间的时间间隔（以毫秒为单位）。

relativeUrl

类型： Boolean

默认： false

（可选）将URL调整为相对。如果为false，则URL已相对于少输入文件相对。

useFileCache

类型： Boolean

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

是否使用每个会话文件缓存。这会缓存较少的文件，以便您可以调用modifyVars，并且不会再次检索所有较少的文件。如果您使用监视程序或在reload设置为true的情况下调用refresh，则在运行之前将清除缓存。


Less.js选项

跨平台选项

包含路径
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 .）：

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

如果您要将Less与使用类似解析语义（如Node.js）的CSS模块组合在一起，这将很有用。

您可能还需要考虑使用data-uri函数而不是此选项，该功能会将图像嵌入到CSS中。

数学

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

Less重建了数学选项，以在先前strictMath设置（始终需要加括号）和默认设置（在所有情况下都执行数学运算）之间提供中间功能。

为了减少与CSS的冲突，CSS现在/在值之间广泛使用符号，现在存在一种数学模式，该模式只需要用括号进行除法即可。尽管支持传统行为，但“严格数学”也已进行了调整，使操作更直观。

适用于的选项为math：

  • always （当前默认设置）-较少进行数学运算
  • parens-division （未来的默认设置） -使用/运算符不会在parens外部执行除法操作（但可以在使用运算符的parens之外“强制” 除法./）
  • parens| strict-更直观的遗产形式strictMath: true
  • strict-legacy（已弃用）-就像命名的一样，其运行方式与current完全相同strictMath: true，不同的是width: -(1);（现在，输出（parens中的单个尺寸值）width: -1;与width: -(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"

严格的单位
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 }

源地图选项

这些选项中的大多数不适用于在浏览器中使用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选项未完全产生所需内容的情况。


预装插件

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

使用插件的最简单方法是使用@pluginat-rule，但在Node.js环境中，您可以通过命令行或在Less选项中指定它来预加载全局Less.js插件。

预处理

如果要添加Less.js预处理器，则必须预加载插件。也就是说，一个插件在解析之前就被调用并通过了原始的Less源。一个示例是Sass-To-Less预处理器插件。

注意：对于预评估插件，不需要进行预加载（在解析Less source之后，但在评估之前）。

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) { }
  );

程序用法

在主入口点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。


API

快来了


为Less.js贡献

感谢您考虑贡献！请仔细阅读贡献说明，以免浪费工作。

安装这些工具

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

  • 在本地克隆less.js存储库
  • 导航到您本地的less.js存储库并运行npm install此程序，以减少npm依赖项的安装。

用法

使用Grunt是为了运行开发命令，例如测试，构建和基准测试。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，它将被编译并输出到stdout。然后，您可以将其与本地运行（node bin/lessc file.less）进行比较。

其他命令

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

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

如果您在库文件夹看看，你会看到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-这使您可以覆盖所需内容，并允许我们在不破坏现有文件管理器的情况下实现新功能。有关文件管理器的示例，请参见2个节点实现，浏览器实现或npm import插件实现。

指南

如果您查看http://www.gliffy.com/go/publish/4784259，则这是减少工作量的概述图。警告！它需要通过v2更改进行更新。