sublime-less2css

Sublime Text 2和3插件，可以在保存时将LESS文件编译成CSS。需要在PATH中安装lessc。

功能

• 在Sublime中编辑 LESS 文件时，在保存时自动编译 less -> css
• 报告编译错误
• 将目录中的所有LESS文件编译成CSS文件

注意：此插件需要lessc在您的执行路径中

重要提示

• 如有任何问题，请在此处提出： https://github.com/timdouglas/sublime-less2css/issues/
• 如果您使用 Ruby less，请在 less2css 设置中设置 minify=false 和 disableVerbose=true。如果您不这样做，LESS文件的编译将无法工作。

安装

安装插件

要么克隆到您的 sublime packages 目录中，或者只需使用 Package Control

安装需求

Less2Css 需要 lessc 来编译 less 到 css。

Mac OS X / Linux(Ubuntu/Debian…)

1. 安装 NodeJS (您可能需要 nodejs-legacy - 见 问题 #23)
2. 安装 npm(NodeJS 包管理器)

3. 安装 less

   npm install less -gd
   

4. 可选：若要使用压缩，您需要一个压缩器。安装 less-plugin-clean-css 或类似软件。

   npm install -g less-plugin-clean-css
   

5. 可选：若要使用自动添加前缀功能，请安装 less-plugin-autoprefix。

   npm install -g less-plugin-autoprefix
   

Windows

1. 克隆 less.js-windows
2. 将您的 less.js-windows 路径添加到 PATH 环境变量中(如何操作？)

中文版详细安装教程

配置

less2css 可以在两个层面上进行配置。首先是用户设置，您可以通过 首选项\包设置\less2css 访问这些设置。这些都是您的全局设置。下面将为您介绍所有各种设置。您可以配置less2css的第二个层面是在项目层面。如果您有一个Sublime Text项目文件，它有 .sublime-project 的扩展名，您可以覆盖该项目的用户设置。这将在本章末尾介绍。

autoCompile

允许的值是 true 和 false。当此设置设置为 true 时，插件将在每次保存LESS文件时编译它（否则您可以从Sublime的“工具”>“Less”>“Css”>“将本文件编译为css”菜单项进行编译）。

createCssSourceMaps

当设置为 true 时，将生成css源映射。

disableVerbose

此选项允许禁用默认启用的详细选项。您可能想关闭此选项的唯一时间是使用ruby gem less（它不支持 –verbose）。

lessBaseDir

该文件夹仅在通过 工具 \ Less>Css \ 将less基础目录中的所有LESS文件编译为css 一次性编译所有LESS文件时使用。这可以是绝对路径或相对路径。当项目结构固定时，相对路径很有用，例如，使用名为 less 的文件夹来保存所有LESS文件。当一次性编译所有文件时，它也会处理基础文件夹下的所有子文件夹。

lesscCommand

此设置可用来指定不同的编译器。如果留空，将默认使用名称为 lessc 的默认编译器。

ignorePrefixedFiles

允许的值是 true 和 false。当设置为 true 时，插件在保存文件且 autoCompile 设置为 true 以及通过 工具 \ Less>Css \ 将less基础目录中的所有LESS文件编译为css 编译所有LESS文件时将不会编译以下划线 (_) 开头的文件。

• 保存和 autoCompile 设置为 true
• 通过 工具 \ Less>Css \ 将less基础目录中的所有LESS文件编译为css 编译所有LESS文件。

您仍然可以通过 工具 \ Less>Css \ 将LESS文件编译为css 或相应的快捷键来编译该文件。

main_file

当您指定主文件时，仅编译保存的任何LESS文件。如果您有一个LESS文件导入所有其他LESS文件，这将非常有用。请注意，此设置仅在编译单个LESS文件时使用，不在通过 工具 \ Less>Css \ 将less基础目录中的所有LESS文件编译为css 编译LESS基础文件夹中的所有LESS文件时使用。注意：如果主文件导入其他文件，其他文件必须在同一文件夹中，以便less2css在编辑导入的文件时自动编译主文件。

minify

默认：True 允许的值是 true/false 或字符串，用于传递一个minification选项给lessc（例如：--clean-css）。当此设置设置为 true 时，LESS编译器将被指示创建一个压缩CSS文件。推荐的less压缩器是 npm install -g less-plugin-clean-css，当 minify=true 时是必需的依赖项。

minName

当minify设置设置为 true 时，LESS编译器将向创建的压缩版CSS文件添加 .min：例如，default.less 将编译成压缩的 default.min.css。

outputDir

使用此设置来指定CSS文件将被放置的文件夹。以下值被支持

• 空字符串或 ./ 使用空字符串或 ./ 使CSS文件存储在与LESS文件相同的文件夹中。

• 绝对路径 指定CSS文件应存储的目录的绝对路径，例如：/home/user/projects/site/assets/css

• 相对路径 指定CSS文件应存储的目录的部分路径，例如：./css。这将把CSS文件存储在项目根目录下的CSS文件夹中。

auto设置

如果你将outputDir设置为auto，插件将尝试自动确定CSS应该编译到的文件夹。当你编译一个包含其他CSS文件的单独CSS文件时，效果最佳。如果你在项目内部使用多个需要单独编译的CSS文件，考虑使用shadow设置。

auto设置识别以下项目设置

• 当你的LESS文件存储在名为css\less的文件夹中（且不在任何子文件夹中）时，编译的CSS文件将放置在css文件夹中。

  [project]
      |- [css]
      |---- [less]
      |-------- site.less
  

编译后将产生以下结果

[project]
        |- [css]
        |---- [less]
        |-------- site.less
        |---- site.css

• 当你的LESS文件存储在名为less的文件夹中，并且其父文件夹有一个名为css的子文件夹时，编译的CSS文件将放置在css文件夹中。

  [project]
      |- [css]
      |- [less]
      |---- site.less
  

编译后将产生以下结果

[project]
        |- [css]
        |---- site.css
        |- [less]
        |---- site.less

• 如果上述两种情况均不满足，CSS文件将与LESS文件存储在同一个文件夹中。

shadow设置

使用这个设置将完整的less文件夹编译成阴影css文件夹。预期你的LESS文件存储在名为less的文件夹中。在这个文件夹中，你可以自由地创建任意数量的子文件夹以组织你的LESS文件。当你通过菜单命令编译单个文件或所有文件时，文件路径中的字符串less将被替换为css。例如，如果你有如下文件结构：

[project]
    |- [less]
    |---- [global]
    |-------- global.less
    |---- [elements]
    |-------- header.less
    |---- site.less

它将生成相同的结构，只更改根文件夹为css，如下：

[project]
    |- [css]
    |---- [global]
    |-------- global.css
    |---- [elements]
    |-------- header.css
    |---- site.css
    |- [less]
    |---- [global]
    |-------- global.less
    |---- [elements]
    |-------- header.less
    |---- site.less

输出文件

当你指定输出文件时，这将用于编译所有LESS文件。文件内容将在每次编译后重写。当你通过工具 \ Less>Css \ 将LESS基本目录下的所有less编译到css中的方式构建LESS基本目录下的所有LESS文件时，你将只有最后编译文件的CSS！如果没有指定，则将每个LESS文件编译为其CSS对应的文件，即：site.less将变为site.css。

showErrorWithWindow

设置为true以在弹出窗口中显示解析错误

autoprefix

设置为true以在转换自LESS后的CSS中添加前缀

silent

设置为true以阻止显示任何警告。

项目设置

你可以使用上述描述的配置设置，并将其应用于你正在工作的项目。为此，你需要手动修改.sublime-project文件。默认项目文件看起来像这样：

{
    "folders":
    [
        {
            "path": "<path_to_project_folder"
        }
    ]
}

你可以添加less2css设置如下：

{
    "folders":
    [
        {
            "path": "<path_to_project_folder"
        }
    ],
    "settings":
    {
        "less2css":
        {
            "autoCompile": false,
            "minify": false
        }
    }
}

现在用户设置autoCompile和minify将被项目设置覆盖。