sublime-less2css

Sublime Text 2 and 3 Plugin to compile less files to css on save. Requires lessc installed on PATH.

Features

• Automatically compile less -> css on save when editing a .less file in sublime
• Reports compilation errors
• Compile all less files in a directory to css files

NB This plugin requires lessc to be in your execution path

Important notes:

• If you have any issues raise them at : https://github.com/timdouglas/sublime-less2css/issues/
• If using ruby less you will need to set

  minify=false

  and

  disableVerbose=true

  within your less2css settings. If you do not do this compiling of less files will not work.

Installation

Install The Plugin

Either clone into your sublime packages directory, or just use Package Control

Install Requirements

Less2Css requires lessc to compile less to css.

Mac OS X / Linux(Ubuntu/Debian…)

1. Install NodeJS (you may need nodejs-legacy - see issue #23)
2. Install npm(NodeJS Package Manager)

3. Install less

   npm install less -gd
   

4. Optional: To use minification you will need a minifier. Install less-plugin-clean-css or similar.

   npm install -g less-plugin-clean-css
   

5. Optional: To use autoprefix. Install less-plugin-autoprefix.

   npm install -g less-plugin-autoprefix
   

Windows

1. Clone less.js-windows
2. Add the path of your less.js-windows to PATH environment variable(How to?).

中文版详细安装教程

Configuration

less2css can be configured on two levels. There are the user settings which you can access through

Preferences\Package Settings\less2css

.sublime-project

autoCompile

The allowed values are

true

false

true

createCssSourceMaps

When

true

disableVerbose

This option allows for the disabling of the verbose option which is used by default. The only time you might want / need to turn this off is then using the ruby gem less (which does not support --verbose).

lessBaseDir

This folder is only used when compiling all LESS files at once through Tools \ Less>Css \ Compile all less in less base directory to css. This can be an absolute path or a relative path. A relative path is useful when your projects always use the same structure, like a folder named

less

lesscCommand

This setting can be used to specify a different compiler. When it is left empty the default compiler, named lessc, will be used.

ignorePrefixedFiles

The allowed values are

true

false

true

_

• saving and

  autoCompile

  set to

  true

• building all LESS files through Tools \ Less>Css \ Compile all less in less base directory to css.

You can still compile the file through Tools \ Less>Css \ Compile this less file to css or the appropriate shortcut.

main_file

When you specify a main file only this file will get compiled when you save any LESS file. This is especially useful if you have one LESS file which imports all your other LESS files. Please note that this setting is only used when compiling a single LESS file and not when compiling all LESS files in the LESS base folder through Tools \ Less>Css \ Compile all less in less base directory to css. Note: If your main file imports other files, the other files must be in the same folder for less2css to automatically compile your main file when editing an imported file.

minify

Default: True The allowed values are

true

false

--clean-css

true

npm install -g less-plugin-clean-css

minify=true

minName

When the minify setting is set to

true

.min

default.less

default.min.css

outputDir

Use this setting to specify the folder where the CSS files will be placed. The following values are supported:

• Empty string or

  ./

  Use an empty string or

  ./

  to have the CSS file stored in the same folder as the LESS file.

• Absolute path Specify an absolute path to the directory where the CSS file should be stored, eg.

  /home/user/projects/site/assets/css

• Relative path Specify a partial path to the directory where the CSS should be stored, eg.

  ./css

  . This will store the CSS files in a folder CSS in the root of the project.

auto

setting

If you set the

outputDir

auto

shadow

The

auto

• When your LESS files are stored directly in a folder called

  css\less

  (and not in any subfolders) the compiled CSS files will be placed in the

  css

  folder.

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

Will result in the following after compilation:

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

• When your LESS files are stored in a folder called

  less

  and its parent folder has a subfolder named

  css

  the compiled CSS files will be placed in the

  css

  folder.

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

Will result in the following after compilation:

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

• If neither of the two cases above have been met the CSS file will be stored in the same folder as the LESS file is in.

shadow

setting

Use this setting to compile a complete

less

css

less

less

css

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

It will generate the same structure, only with css as its root folder like:

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

outputFile

When you specify an output file, this will be the file name used to compile all LESS files to. The content of the file will be overwritten after each compile. When you build all LESS file in the LESS base folder through Tools \ Less>Css \ Compile all less in less base directory to css you will only have the CSS of the last compiled file! Assign an empty string to have each LESS file compiled to its CSS counterpart, ie: site.less will become site.css.

showErrorWithWindow

Set to

true

autoprefix

Set to

true

silent

Set to

true

Project settings

You can use the configuration settings that are described above and apply them to just the project you are working on. In order to do this you need to manually alter the

.sublime-project

{
    "folders":
    [
        {
            "path": "
You can add the less2css settings like this:
{
    "folders":
    [
        {
            "path": "
Now the user settings 
autoCompile
 and 
minify
 will be overriden by the project setting.