Less - 命令行使用

Less - Command Line Usage

Less 编译器可以通过 lessc 从命令行调用。这允许你将 .less 文件编译为 .css 文件，使其适合脚本编写和与构建工具集成。

用于命令行使用的安装

要使用 lessc，首先需要使用 npm (Node Package Manager) 全局或作为项目依赖项安装 Less，npm 随 Node.js 一起提供。

全局安装：

npm install less -g

这将使 lessc 命令在系统范围内可用。虽然直接使用很方便，但对于项目特有的依赖项，通常更推荐本地安装，以确保跨环境的版本一致性。

你可以使用 npm install less@<version> -g 全局安装特定版本（例如，npm install less@4.1.3 -g）。

本地（项目）安装（推荐）：

npm install less --save-dev
# or using the shorter alias -D
npm install less -D

这会将 Less 安装为当前项目的开发依赖项，并将其添加到 package.json 文件中。这是项目的首选方法，因为它可以确保项目中的所有开发者使用相同版本的 Less。然后，你可以通过 npm 脚本（例如，npx lessc ...）或直接通过路径指向 node_modules/.bin/lessc 来运行 lessc。

Beta/开发版本：

要安装预发布版本（例如 beta）：npm install less@beta --save-dev。要直接从 Git 仓库安装（用于测试未发布更改）：npm install less/less.js#commit-sha-or-branch --save-dev。

基本命令行用法

lessc 的基本语法是：

lessc [options] <source_file.less> [destination_file.css]

如果省略了 destination_file.css，CSS 输出将发送到标准输出（stdout）。如果 source_file.less 是一个连字符（-），则输入从标准输入（stdin）读取。

示例：将 style.less 编译为 style.css

lessc style.less style.css

示例：编译并精简

lessc --compress style.less style.min.css

注意：虽然 Less 使用 --compress（别名 -x）提供基本的压缩，但对于生产构建，通常在 Less 编译后使用 PostCSS 及其插件（如 cssnano）进行更高级的 CSS 优化。

常用 `lessc` 选项

lessc 命令提供各种选项。要获取完整列表，请运行 lessc --help。以下是一些常用选项：

选项	别名	描述	示例命令
`--help`	`-h`	显示包含所有选项的帮助信息。	`lessc --help`
`--version`	`-v`	显示 Less 编译器版本。	`lessc -v`
`--include-path=PATHS`		指定要搜索 `@import` 导入文件的路径列表。路径之间使用 `:` (Linux/macOS) 或 `;` (Windows) 分隔。	`lessc --include-path=lib;shared styles.less`
`--compress`	`-x`	移除不必要的空白字符以压缩输出。对于高级精简，考虑使用 `cssnano` 等工具。	`lessc --compress main.less main.min.css`
`--source-map[=FILENAME]`		生成 source map（源地图）。如果省略 FILENAME，则从输出 CSS 推断。这会创建一个单独的 `.map` 文件。	`lessc --source-map style.less style.css`
`--source-map-map-inline`		将 source map 作为 data URI 直接嵌入到输出 CSS 文件中。	`lessc --source-map-map-inline style.less style.css`
`--source-map-less-inline`		将所有 Less 源文件直接嵌入到 source map 中（如果原始 `.less` 文件不会在服务器上，此选项非常有用）。	`lessc --source-map --source-map-less-inline style.less style.css`
`--source-map-rootpath=URL`		指定要添加为前缀到 source map 中源文件路径的根路径。	`lessc --source-map --source-map-rootpath=/app/src/ style.less`
`--source-map-basepath=PATH`		指定要从 source map 中源文件路径剥离的基本路径。	`lessc --source-map --source-map-basepath=src/less/ style.less`
`--global-var='NAME=VALUE'`		定义一个全局变量。可以指定多次。	`lessc --global-var='brand-color=blue' style.less`
`--modify-var='NAME=VALUE'`		修改一个变量，实际上是覆盖它，就像在文件末尾声明一样。	`lessc --modify-var='font-size=14px' style.less`
`--url-args='ARGS'`		将查询字符串（ARGS）添加到每个 URL。对于缓存清除（cache busting）很有用。	`lessc --url-args='v=1.2.3' style.less`
`--strict-math=on\|off`	`-sm=on\|off`	控制数学计算严格性。默认值为 `on`（自 Less v4 起），大多数运算需要使用括号。使用 `--strict-math=off` 可恢复遗留行为。	`lessc --strict-math=on style.less`
`--strict-units=on\|off`	`-su=on\|off`	如果为 `on`，Less 会验证表达式中的单位（例如，`1px + 1em` 会报错）。默认值为 `off`。	`lessc --strict-units=on style.less`
`--lint`	`-l`	检查语法并报告错误，但不生成输出 CSS。	`lessc --lint style.less`
`--no-js`		禁用 Less 文件中的 JavaScript 求值（内联 JavaScript）。	`lessc --no-js style.less`
`--plugin=NAME[=OPTIONS]`		加载 Less 插件。示例：`lessc --plugin=less-plugin-autoprefix`。某些插件可能有简写标志。	`lessc --plugin=less-plugin-clean-css="advanced" style.less`

实际应用与技巧

NPM 脚本（NPM Scripts）： 将 lessc 命令集成到你的 package.json 脚本中，以便轻松一致地执行（例如，"scripts": { "build:css": "lessc styles/main.less public/css/main.css --source-map" }）。然后使用 npm run build:css 运行。
监听模式（Watch Mode）： lessc 本身没有内置的监听模式。要实现文件更改时的自动重新编译，请使用 nodemon、chokidar-cli 或专用的 Less 监听器（如 less-watch-compiler），这些工具通常在 npm 脚本中配置。
使用 nodemon 的示例：nodemon --watch src/less --ext less --exec "lessc src/less/main.less dist/css/main.css"
与其他工具结合： lessc 的输出可以通过管道传输到其他命令行工具（例如，如果未在 Less 中使用相应的插件，可将输出传输到 PostCSS 进行自动添加前缀（autoprefixing）或进一步精简）：lessc style.less | postcss --use autoprefixer -o style.post.css。
理解 Source Maps： Source map 对于调试至关重要。在浏览器开发者工具中检查元素时，它将指向原始的 .less 文件和行号，而不是编译后的 .css，这极大地简化了调试过程。