less的使用方法

少用

减少节点，浏览器和第三方的使用。有关常规安装说明和概述，请阅读我们首页上的“ 减少使用”部分。

V2升级指南

语言变更

现在，颜色在写入时即输出，因此purple保持原样purple且不转换为其十六进制表示形式。

命令行用法

干净的CSS

我们已经删除了对clean CSS的依赖，并将其移至了plugin。这使我们能够：

1. 在不减少发布的情况下更新依赖关系和集成
2. 不要将不使用纯CSS的人捆绑到npm下载。

用法类似，只需安装插件（npm install -g less-plugin-clean-css），然后通过--clean-css参数告诉使用它的人较少 。

# old
lessc --clean-css --clean-option=--compatibility:ie8 --clean-option=--advanced
# new
lessc --clean-css="--compatibility=ie8 --advanced"

源图

我们改进了源地图选项和路径生成，因此应在正确的路径上生成源地图，而不指定任何选项。

程序用法

我们不建议使用less.Parser和toCss来生成css。相反，我们要求您使用less.render速记。有关更多信息，请参见编程用法。

此外，我们返回一个对象，该对象的css字段设置为字符串，而map字段设置为sourcemap（如果适用），而不是返回css 的字符串。

现在将在sourceMap上设置sourcemap选项，而不是直接在选项上设置。因此，代替options.sourceMapFullFilename =您进行设置options.sourceMap = { sourceMapFullFilename:。

浏览器使用情况

浏览器的使用没有明显变化。在运行less脚本后，less将公开在对象上设置的选项less.options，而不是污染less。

现在可以在脚本上指定选项并减少标签，这将简化浏览器中的选项设置。有关更多信息，请参见浏览器使用情况部分。

命令行用法

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

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

lessc全局安装以供使用

用npm安装

npm install less -g

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

安装进行节点开发

或者，如果您不全局使用编译器，那么您可能会

npm i less --save-dev

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

请注意，插入符号版本范围将在中自动指定package.json。这很好，因为npm可以安装最新版本的新次要版本。

Lessc的Beta版本

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

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

安装未发布的lessc开发版本

如果要安装最新版本的lessc，请遵循将git URL指定为依赖项的说明，并确保将实际的提交SHA（而不是分支名称）指定为commit-ish。这将确保您的项目始终使用该lessc的确切版本。

指定的git URL可以是官方的lessc repo或fork的URL。

服务器端和命令行用法

该存储库中包含的二进制文件bin/lessc可与* nix，OS X和Windows上的Node.js一起使用。

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

命令行用法

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

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

例子

# compile bootstrap.less to bootstrap.css
$ lessc bootstrap.less bootstrap.css

# compile bootstrap.less to bootstrap.css and minify (compress) the result
$ lessc -x bootstrap.less bootstrap.css

选件

救命

lessc --help
lessc -h

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

包含路径

lessc --include-path=PATH1;PATH2

可用的集合包括路径。以'：'或';'分隔 在Windows上。

如果@import规则中的文件在该确切位置不存在，则在传递给此选项的位置中寻找该文件的人会更少。例如，您可以使用它来指定要在较少文件中相对简单地引用的库的路径。

在节点中，设置路径选项

{ paths: ['PATH1', 'PATH2']  }

生成文件

lessc -M
lessc --depends

没有颜色

lessc --no-color

没有IE相容性

lessc --no-ie-compat

当前仅用于data-uri函数，以确保不会创建太大的图像，以至于浏览器无法处理。

禁用JavaScript

lessc --no-js

皮棉

lessc --lint
lessc -l

运行较少的解析器，仅报告错误而没有任何输出。

无声

lessc -s
lessc --silent

停止显示任何警告。

严格进口

lessc --strict-imports

允许从不安全的HTTPS主机导入

lessc --insecure

版

lessc -v
lessc --version

压缩

lessc -x
lessc --compress

使用较少的内置压缩进行压缩。这做得不错，但没有利用专用css压缩的所有技巧。请随时通过请求请求来改善压缩输出。

干净的CSS

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

源映射输出文件名

lessc --source-map
lessc --source-map=file.map

少说生成源图。如果您有没有文件名的sourcemap选项，它将使用较少源文件的文件名，但带有扩展名映射。

源图根路径

lessc --source-map-rootpath=dev-files/

指定一个根路径，该根路径应附加到源映射中的每个较少的文件路径之前，也应附加至输出css中指定的映射文件的路径。

因为基本路径默认为少输入文件的目录，所以根路径默认为从源映射输出文件到少输入文件的基本目录的路径。

例如，如果您在Web服务器的根目录中生成了一个css文件，而源less / css / map文件位于另一个文件夹中，则使用此选项。因此，对于以上选项，您可能有

output.css
dev-files/output.map
dev-files/main.less

源图基本路径

lessc --source-map-basepath=less-files/

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

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

源地图更少的内联

lessc --source-map-less-inline

此选项指定我们应将所有Less文件都包含在源图中。这意味着您只需要地图文件即可到达原始来源。

可以将其与map inline选项结合使用，因此您根本不需要任何其他外部文件。

源地图内联地图

lessc --source-map-map-inline

此选项指定映射文件应在输出CSS中内联。不建议在生产中使用它，但在开发中，它允许编译器生成一个输出文件，该文件在支持该文件的浏览器中使用已编译的CSS，但向您显示未编译的较少源代码。

源地图URL

lessc --source-map-url=../my-map.json

允许您覆盖css中指向地图文件的URL。这是针对rootpath和basepath选项未完全产生所需内容的情况。

根路径

lessc -rp=resources/
lessc --rootpath=resources/

允许您为CSS中每个生成的导入和url添加路径。这不会影响处理的导入语句的减少，只会影响输出css中剩下的导入语句。

例如，如果css使用的所有图像都在一个名为resources的文件夹中，则可以使用此选项将其添加到URL上，然后使该文件夹的名称可配置。

相对网址

lessc -ru
lessc --relative-urls

默认情况下，URL保持原样，因此，如果在引用图像的子目录中导入文件，则CSS中将输出完全相同的URL。此选项使您可以重写导入文件中的URL，以使URL始终相对于基本导入文件。例如

# main.less
@import "files/backgrounds.less";
# files/backgrounds.less
.icon-1 {
  background-image: url('images/lamp-post.png');
}

这将正常输出以下内容

.icon-1 {
  background-image: url('images/lamp-post.png');
}

但启用此选项后，它将输出

.icon-1 {
  background-image: url('files/images/lamp-post.png');
}

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

严格数学

lessc -sm=on
lessc --strict-math=on

默认为关闭。

如果在Less上没有此选项，则会尝试处理CSS中的所有数学运算，例如

.class {
  height: calc(100% - 10px);
}

目前将被处理。

启用严格的数学运算后，仅会处理不必要的括号内的数学运算。例如。

.class {
  width: calc(100% - (10px  - 5px));
  height: (100px / 4px);
  font-size: 1 / 4;
}

.class {
  width: calc(100% - 5px);
  height: 25px;
  font-size: 1 / 4;
}

我们最初计划在将来将其默认设置为true，但是这一直是一个有争议的选择，我们正在考虑是否以正确的方式解决了该问题，或者对于/使用有效或calc的实例，是否应该仅包含较少的例外。

严格的单位

lessc -su=on
lessc --strict-units=on

默认为关闭。

如果没有此选项，则在进行数学运算时，将较少尝试猜测输出单元。例如

.class {
  property: 1px * 2px;
}

在这种情况下，事情显然是不对的-长度乘以长度会得到一个面积，但是css不支持指定面积。因此，我们假设用户将其中一个值表示为一个值，而不是长度单位，然后输出2px。

启用严格的单位，我们假设这是计算中的错误并引发错误。

全局变量

lessc --global-var="my-background=red"

此选项定义文件可以引用的变量。实际上，该声明放置在基本Less文件的顶部，这意味着可以使用该声明，但是如果在文件中定义了此变量，也可以将其覆盖。

修改变量

lessc --modify-var="my-background=red"

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

网址参数

lessc --url-args="cache726357"

此选项使您可以指定一个参数，以继续每个URL。例如，这可用于缓存清除。

行号

lessc --line-numbers=comments
lessc --line-numbers=mediaquery
lessc --line-numbers=all

生成内联源映射。这是浏览器开始支持源地图之前的唯一选项。我们正在考虑不推荐使用，因此如果您希望保留此选项，请与我们联系。

插入

lessc --clean-css
lessc --plugin=clean-css="advanced"

--plugin加载插件。如果插件开始较少插件，也可以省略--plugin =。例如，清洁的css插件一安装即称为less-plugin-clean-css（npm install less-plugin-clean-css），可与--plugin = less-plugin-clean-css一起使用，或仅与--clean-css指定一起使用之后的选项，例如--plugin = less-plugin-clean-css =“ advanced”或--clean-css =“ advanced”

在浏览器中使用更少

我们建议仅在开发中或在需要动态编译而无法在服务器端执行的情况下，才在浏览器中使用较少的代码。这是因为less是一个很大的javascript文件，并且在用户看不到页面之前进行较少的编译对于用户来说意味着延迟。此外，请考虑移动设备的编译速度会较慢。对于开发而言，请考虑是否更适合使用监视程序和实时重装（例如咕gr声或吞咽声）。

要在浏览器中使用更少的脚本，首先需要包含less脚本。

<!-- Here: include any less plugin scripts, any required browser shims and optionally set less = any options  -->
<script src="less.js"></script>

这将在页面上找到更少的样式标签

<link rel="stylesheet/less" type="text/css" href="styles.less" />

并与已编译的CSS同步创建样式标签。

设定选项

您可以以编程方式设置选项，方法是将其设置在script标记之前的较少对象上-这将影响所有初始链接标记，并以编程方式使用较少的标记。

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

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

<script>
  less = {
    env: "development"
  };
</script>
<script src="less.js" data-env="development"></script>

您也可以在链接标记上执行此操作以覆盖某些设置（一些更详细的设置，例如verbose是全局的，不能被覆盖）。

<link data-dump-line-numbers="all" data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

属性选项的重点是

• 重要性级别：window.less <脚本标签<链接标签
• 数据属性名称不是camelCase（例如logLevel-> data-log-level）
• 链接标记选项仅是渲染时间选项（例如，不支持详细，logLevel ...）
• 非字符串数据属性值应为JSON有效（例如，使用双引号代替in中的单引号data-global-vars='{ "myvar": "#ddffee", "mystr": "\"quoted\"" }'）

观看模式

要启用观看模式，env必须将选项设置为development。然后，在包含less.js文件之后，调用less.watch()，如下所示：

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

或者，您可以通过附加#!watch到URL来临时启用“监视”模式。

修改变量

启用更少变量的运行时修改。当使用新值调用时，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: '"string value"',
      var2: 'regular value'
    },
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

异步的

类型： Boolean

默认： false

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

dumpLineNumbers

类型：String 选项：''| 'comments'| 'mediaquery'| 'all' 默认：''

设置后，这会将源行信息添加到输出css文件中。这可以帮助您调试特定规则的来源。

该comments选项用于输出用户可理解的内容，而mediaquery与用于解析CSS并提取信息的firefox扩展一起使用。

将来，我们希望此选项能被源映射取代。

环保

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

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

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

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

例如

less = { env: 'production' };

错误报告

类型： String

选项：html| console|function

默认： html

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

fileAsync

类型： Boolean

默认： false

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

功能

类型： object

用户功能，按名称键。

例如

less = {
    functions: {
        myfunc: function() {
            return new(less.tree.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已经相对于条目较少的文件相对。

globalVars

类型： Object

默认： undefined

要注入代码的全局变量列表。对象的键是变量名，值是变量值。如果需要，“字符串”类型的变量必须显式包含引号。

例如

less.globalVars = { myvar: "#ddffee", mystr: "\"quoted\"" };

此选项定义文件可以引用的变量。实际上，该声明放置在基本Less文件的顶部，这意味着可以使用该声明，但是如果在文件中定义了此变量，也可以将其覆盖。

ModifyVars

类型： Object

默认： undefined

与globalVars格式相同。

与globalVars选项相反，这会将声明放在基本文件的末尾，这意味着它将覆盖Less文件中定义的所有内容。

根路径

类型： String

默认： false

添加到每个URL资源开始处的路径。

useFileCache

类型： Boolean

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

是否使用每个会话文件缓存。这会缓存较少的文件，以便您可以调用ModifyVars，而不会再次检索所有较少的文件。如果您使用监视程序或将reload设置为true的呼叫刷新，则将在运行之前清除缓存。

浏览器支持

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

请注意，PhantomJS目前尚未实现，Function.prototype.bind因此您需要使用es-5填充程序才能在PhantomJS下运行此功能（我们使用PhantomJS进行测试，并附加es5-填充程序以使其正常工作）。

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

如果您需要在较旧的浏览器中少运行，请使用es-5填充程序，它将添加较少需要的javascript功能。

此外，如果您在脚本或链接标签上使用选项作为属性，则需要浏览器支持JSON.parse或适当的polyfill。

外挂程式

如何使用插件？

命令行

如果您使用的是lessc，则要做的第一件事就是安装该插件。我们建议插件以“ less-plugin”开头，尽管这不是必需的。对于clean-css插件，您将使用

npm install less-plugin-clean-css

要使用该插件，如果您指定了无法识别的选项，我们会尝试加载该插件，例如

lessc --clean-css="advanced"

将使用您刚安装的插件。例如，您也可以更直接

lessc --plugin=path_to_plugin=options

使用插件代码

在Node中，需要插件并将其作为选项插件传递给数组中的更少元素。例如

var myPlugin = require("my-plugin");
less.render(myCSS, { plugins: [myPlugin] })
   .then(function(output) {
    },
    function(error) {
    });

在浏览器中

插件作者应提供一个javascript文件，只需在less.js脚本之前的页面中包含该文件即可。

<script src="plugin.js"></script>
<script>
less = { 
    plugins: [plugin]
};
</script>  
<script src="less.min.js"></script>

较少的插件列表

可用的更少插件。在NPM注册表中查找更多信息

后处理器/功能插件

自动前缀	添加供应商前缀
CSScomb	美化/格式化
清洁css	压缩/缩小
CSSWring	压缩/缩小
CSS翻转	生成从左到右（LTR）或从右到左（RTL）CSS
功能	在Less本身中编写自定义的Less函数
球状	更少的进口中的全球支持
组css媒体查询	组CSS媒体查询
内联网址	转换url()为data-uri()
npm导入	从npm包导入
pleasease	使用pleeease进行后处理
rtl	从LTR反转为RTL

框架/图书馆进口商

引导程序	导入Bootstrap
鲍尔决心	从Bower包导入
less.js的主要CSS	进口红衣主教
Flexbox网格	导入Flexbox网格
柔性网格系统	导入柔性网格系统
离子性	进口离子
莱瑟特	导入Lesshat
骨架	进口骨架

功能库

高级色彩功能	一些高级色彩功能有助于发现更多对比
立方螺旋	cubehelix(y,a,b,t) 函数使用伽玛校正值1返回两种颜色a和b之间的颜色
清单	列表/数组操作函数库

对于插件作者

Less支持某些入口点，使作者可以与Less集成。我们将来可能会添加更多。

插件本身具有非常简单的签名，像这样

{
    install: function(less, pluginManager) {
    },
    minVersion: [2, 0, 0] /* optional */
}

因此，插件获得的对象较少，在v2中具有更多类（使其易于扩展），是一个插件管理器，它提供了一些挂钩来添加访问者，文件管理器和后处理器。

如果您的插件支持lessc，则还有更多详细信息，签名如下所示

{
    install: function(less, pluginManager) {
    },
    setOptions: function(argumentString) { /* optional */
    },
    printUsage: function() { /* optional */
    },
    minVersion: [2, 0, 0] /* optional */
}

附加setOptions功能是传递用户在指定插件时输入的字符串的printUsage函数，也是您应用来解释选项和插件工作原理的函数。

以下是一些示例存储库，显示了不同的插件类型：

• 后处理器：https : //github.com/less/less-plugin-clean-css
• 访客：https：//github.com/less/less-plugin-inline-urls
• 文件管理器：https : //github.com/less/less-plugin-npm-import

注意：插件与为不同环境创建更少版本的插件有所不同，但是它们确实有相似之处，例如，节点默认提供2个文件管理器，浏览器提供一个，这是在特定环境中减少运行的主要步骤。该插件允许您添加文件管理器。

程序用法

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.Parser，然后在结果上调用CSS。但是，这有两个严重的缺点-这意味着我们的解析器实际上与所有less都绑定在一起，第二个意味着toCSS调用必须是同步的。

您仍然可以获得较少的解析树，但是需要更多步骤。您可以在render函数中看到如何完成此操作，但是我们不支持以这种方式使用少一些的功能，并且可能会在次要版本的碰撞中更改此功能（我们不会在补丁程序版本中对其进行破坏）。

访问日志

您可以使用以下代码添加日志侦听器

less.logger.addListener({
    debug: function(msg) {
    },
    info: function(msg) {
    },
    warn: function(msg) {
    },
    error: function(msg) {
    }
});

注意：所有功能都是可选的。错误不会被记录，而是传递回回调或在less.render中的promise。

在线较少编译器

less2css.org

浏览器中托管的在线集成开发环境（IDE），允许用户实时编辑和编译Less到CSS。

winless.org/online-less-compiler

此在线较少编译器可以帮助您学习较少。您可以浏览以下示例，也可以尝试自己的Less代码。

lesstester.com

Less CSS在线编译器。

dopefly.com/less-converter

使用Less JS项目的简单的Less CSS文件转换器。

lessphp.gpeasy.com/demo

less.php现场演示。

leafo.net/lessphp/editor

lessphp现场演示。

进动

实时预处理程序编译器。

estFiddle

在线Less编译器提供了Less和est的实时演示。1.4.0使用可选的est / Autoprefixer功能后，允许用户在Less的所有版本之间切换。

莱斯

ILess PHP编译器的实时演示

较少支持的在线Web IDE /游乐场

CSSDeck实验室

CSSDeck Labs是一个可以快速创建一些涉及HTML，CSS，JS代码的实验（或测试用例）的地方。

密码笔

CodePen是Web前端侧的游乐场。

小提琴沙拉

具有即时准备好的编码环境的在线游乐场。

JS斌

JS Bin是一个Web应用程序，专门用于帮助JavaScript和CSS民间测试代码段。

jsFiddle

在线网页编辑器

更少的GUI

提示：尝试使用适用于您平台的各种Less工具，以查看哪种工具可以满足您的需求。

此页面重点介绍GUI编译器。有关命令行用法和工具，请参见命令行用法。

跨平台

紧缩2！

很棒的人的编辑器和编译器。

Crunch 2是具有集成编译功能的跨平台（Windows，Mac和Linux）编辑器。如果使用大型Less项目，则绝对应该尝试一下，因为您只需要Less文件的免费版本。可在以下网址获得：http : //getcrunch.co/。

 

混合物

为设计人员和开发人员提供的快速原型制作和静态网站生成工具

Mixture汇集了一系列很棒的工具和最佳实践。它快速，轻松，超级强大，并且可以与您喜欢的编辑器一起使用。

获取更多信息：http : //mixture.io/

 

简单的

SimpLESS是简约的Less编译器。只需拖放和编译即可。

SimpLESS的独特功能之一是它通过使用http://prefixr.com支持CSS的“前缀” 。。SimpLESS建立在Titanium平台上。获取更多信息：http : //wearekiss.com/simpless

 

考拉

Koala是一个跨平台的GUI应用程序，用于编译较少的，简单的和无聊的脚本。

功能：跨平台，编译错误通知支持和编译选项支持。

 

 

专业人士

Prepros是用于编译LESS，Sass，Compass，Stylus，Jade等工具。

在https://pr

特定平台

视窗

温莱斯

WinLess最初是Less.app的克隆版本，它采用了功能更完善的方法，并具有多个设置。它还支持以命令行参数开头。

获取更多信息：http : //winless.org

 

OS X

代码包

CodeKit是LESS.app的后继产品，并在许多其他预处理语言（例如SASS，Jade，Markdown等）中支持Less。

获取更多信息：http : //incident57.com/codekit

 

LiveReload

CSS编辑和图像更改实时生效。CoffeeScript，SASS，Less和其他仅能正常工作。

获取更多信息：http : //livereload.com

 

的Linux

普莱西奇

Plessc是使用PyQT制作的图形用户界面。

自动编译，日志查看器，使用选择的编辑器打开更少的文件，以及用于编译文件的设置。获取更多信息：https : //github.com/Mte90/Plessc

 

编辑器和插件

另请参见：Less.js的GUI

编辑器和IDE

• 紧缩！（内置支持）
• Mindscape Web Workbench（内置支持）
• NetBeans（内置语法突出显示）
• 文字伴侣
• Vim
• 埃马克斯
• jetBrains WebStorm和PhpStorm（内置支持）
• 括号（内置语法高亮显示，几个扩展用于编译）
• CodeLobster（内置语法突出显示）
• KineticWing IDE（内置支持）
• nodeMirror（内置支持，内置HTML / CSS / Less预览）
• HTML-Kit工具（内置支持）

崇高文字2和3

• 不太崇高
• 崇尚CSS
• 减少建造崇高
• SublimeOnSaveBuild

日食

• Eclipse Less插件，作者Vincent Simonet
• Thomas Gossmann的Transpiler插件

科莫多Edit / IDE

• Bob de Haas 编写的Komodo Less编译器

视觉工作室

• CSS更少（Visual Studio）
• Web Essentials 2012（Visual Studio 2012）
• Web Essentials 2013（Visual Studio 2013）
• Web工具2013（Visual Studio）

Dreamweaver的

• DMXzone Less CSS编译器

记事本++ 6.x

• Less.js语法突出显示了用户定义语言，劳尔·萨利特罗（RaúlSalitrero）
• Less.js语法azrafe7突出显示用户定义的语言
• 如何安装

第三方编译器

Node.js编译器

• 咕con咕con的
• assemble-less：功能齐全的Grunt.js插件，用于将Less文件编译为CSS，并带有用于维护Less组件和主题库的其他选项。对于高级用户，此插件使您可以使用JSON， Lo-dash（下划线）模板（例如<%= bootstrap.less %>）和 node-glob / minimatch（例如'../src/**/*.less"）来定义和管理较少的“包”或“包”。少汇编也有很多选择，包括最小化CSS
• 一饮而尽少：请注意，此插件丢弃source-map选项，选择加入，而不是使用一饮而尽，sourcemaps库。
• RECESS：Twitter的CSS的代码质量工具基于Less之上。RECESS具有用于将Less编译为CSS，以及对CSS进行格式化，格式化和最小化的选项。
• autoless：具有较少文件监视程序，具有依赖项跟踪（对导入文件的更改也会导致其他文件也被更新）和咆哮通知。
• 用于Less.js的连接中间件：用于Less.js的连接中间件编译

其他技术

Wro4j Runner CLI 下载wro4j-runner.jar文件并运行以下命令：

java -jar wro4j-runner-1.5.0-jar-with-dependencies.jar --preProcessors lessCss

可以在这里找到更多详细信息：Wro4j Runner CLI

CSS :: LESSp

http://search.cpan.org/~drinchev/CSS-LESSp/

lessp.pl styles.less > styles.css

Windows脚本主机

注意-官方的Less节点在Windows上运行，因此我们不确定为什么要使用它。

适用于Windows的Less.js：

cscript //nologo lessc.wsf input.less [output.css] [-compress]

要么

lessc input.less [output.css] [-compress]

无点

Windows的dotless可以这样运行：

dotless.Compiler.exe [-switches] <inputfile> [outputfile]

另请参阅：

• 更少的港口

使用更少的框架

UI /主题框架和组件

1px深	将相对视觉重量的设计或采用配色方案的设计带入Bootstrap
靴子	基于Bootstrap的开源Flat UI KIT
开机	具有内置Blog和Flat File CMS的PHP框架
引导程序	用于在网络上开发响应式，移动优先项目的前端框架
Bootstrap A11y主题	使Bootstrap开发人员更容易访问Web
靴表	Bootstrap免费主题集合
红衣主教	适用于构建响应式Web应用程序的前端开发人员的小型“移动优先” CSS框架
CSSHórus	开发响应式和移动网站的库
平板UI免费	Bootstrap的主题和框架
正面尺寸	CSS前端框架
内容不足	使用CSS创建的带有描述的图像内容
墨	一组用于快速开发Web界面的工具
JBST	可用作独立网站构建器或创建WordPress主题的主题框架
克纳斯协会	极简，敏感和可扩展的样式表，可启动您的HTML / CSS项目
库贝	面向开发人员和设计师的简约CSS框架
Metro UI CSS	用于创建具有类似于Windows 8界面的网站的样式集
预	CSS框架
序幕	轻巧，响应迅速且可扩展的前端框架
架构图	轻巧，响应迅速且精益的前端UI框架
语义UI	基于自然语言中有用原理的UI组件框架
UIkit	用于开发Web界面的轻型模块化前端框架
ng样板	对AngularJS项目有坚定的态度
铁轨少	Less.js for Rails
e	轻巧的前端框架，用于逻辑构建复杂的响应式Web项目

网格系统

柔性网格系统
AdaptGrid
可流动的
金色网格系统
更少Zen Grid
无序
负责任地
响应样板
语义

Mixin库

3升	Mixins库
动画	CSS3关键帧动画库
不清晰	mixins的集合
CSS3Less请	将css3please.com转换为LESS mixins
CSS效果	CSS样式效果的集合
owl	Mixin库
无立方体	仅使用CSS的动画3D立方体
美东时间	Mixin库
六边形	生成具有自定义尺寸和颜色的CSS六边形
无家可归	Mixin库
较少元素	混合集
更少的帽子	Mixins库
莱斯利	茉莉花般的测试套件，用更少的代码编写
LESS-比迪	用于创建双向样式的混合集
较少混合	Mixins库
媒体查询类型	较少媒体类型的媒体查询
多色少	在浏览器中进行设计时可以使用变量进行更轻松的颜色操作
少一点	支持LESS 1.7的Mixin lib
更少	混合，动画，形状等
或多或少	for循环和其他功能+ css3 mixins
归一化	使用更少的模块化著名的normalize.css
奥本	mixins的集合
预启动	变量和混合集的集合。Bootstrap的前身
前奏混音	mixins的集合
形状少	各种形状的mixin集合
无需工具	Mixins和常用动作功能

少发展

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

安装这些工具

• 节点 - http://nodejs.org/
• phantomjs - http: //phantomjs.org/download.html

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

• 在本地克隆less.js存储库
• 导航到您本地的less.js存储库并运行npm install此程序，以减少npm依赖项的安装。
• 如果您以前从未使用过grunt，请运行npm install grunt-cli -g-这使您可以在任何地方使用“ grunt”命令

用法

如果您转到less信息库的根目录，则应该能够执行grunt test-这应该运行所有测试。仅针对特定的浏览器，运行grunt browsertest如果要针对文件试用当前版本的less，请从此处执行node bin/lessc path/to/file.less

要调试浏览器测试，请运行grunt browsertest-server然后转到http：// localhost：8088 / tmp / browser /以查看测试运行器页面。

可选：要获取较少编译器的当前版本，请执行npm -g install less-npm是节点软件包管理器，“-g”将其安装为全局可用。

现在，您应该能够执行操作，lessc file.less并且如果有适当的file.less，它将被编译并输出到stdout。然后，您可以将其与本地运行（node bin/lessc file.less）比较。

其他命令

• grunt benchmark -运行我们的基准测试以获取一些性能数据
• grunt stable 创建一个新版本
• 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插件实现。