Less2Css
Sublime Text 2 Plugin to compile less files to css on save
Details
Installs
- Total 118K
- Win 81K
- Mac 26K
- Linux 11K
Oct 6 | Oct 5 | Oct 4 | Oct 3 | Oct 2 | Oct 1 | Sep 30 | Sep 29 | Sep 28 | Sep 27 | Sep 26 | Sep 25 | Sep 24 | Sep 23 | Sep 22 | Sep 21 | Sep 20 | Sep 19 | Sep 18 | Sep 17 | Sep 16 | Sep 15 | Sep 14 | Sep 13 | Sep 12 | Sep 11 | Sep 10 | Sep 9 | Sep 8 | Sep 7 | Sep 6 | Sep 5 | Sep 4 | Sep 3 | Sep 2 | Sep 1 | Aug 31 | Aug 30 | Aug 29 | Aug 28 | Aug 27 | Aug 26 | Aug 25 | Aug 24 | Aug 23 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Windows | 0 | 0 | 0 | 0 | 1 | 2 | 1 | 3 | 1 | 1 | 1 | 1 | 5 | 0 | 0 | 0 | 0 | 1 | 0 | 3 | 0 | 0 | 3 | 0 | 2 | 0 | 2 | 1 | 0 | 1 | 1 | 0 | 1 | 0 | 2 | 3 | 3 | 2 | 0 | 0 | 0 | 0 | 1 | 0 | 0 |
Mac | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Linux | 0 | 1 | 0 | 0 | 0 | 2 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
Readme
- Source
- raw.githubusercontent.com
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
anddisableVerbose=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…)
- Install NodeJS (you may need nodejs-legacy - see issue #23)
- Install npm(NodeJS Package Manager)
Install less
npm install less -gd
Optional: To use minification you will need a minifier. Install less-plugin-clean-css or similar.
npm install -g less-plugin-clean-css
Optional: To use autoprefix. Install less-plugin-autoprefix.
npm install -g less-plugin-autoprefix
Windows
- Clone less.js-windows
- 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
. These are your global settings. Below you will find a description for all the various settings. The second level where you can configure less2css is at the project level. If you have a Sublime Text project file, it has the extension .sublime-project
, you can override your user settings for just that project. This will be described at the end of this chapter.
autoCompile
The allowed values are true
and false
. When this setting is set to true
the plugin will compile your LESS file each time you save it (otherwise you can compile from Sublime's “Tools” > “Less > Css” > “Compile this file to css” menu item).
createCssSourceMaps
When true
a css source map will be generated.
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
to keep all your LESS files in. When compiling all files at once it will also process all subfolders under the base folder.
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
and false
. When this setting is true
the plugin will not compile files whose file name start with an underscore (_
) when:
- saving and
autoCompile
set totrue
- 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
or a string which passes a minification option to lessc (e.g. --clean-css
).
When this setting is set to true
the LESS compiler will be instructed to create a minified CSS file. The recommended less minifier is npm install -g less-plugin-clean-css
which is a required dependancy when minify=true
.
minName
When the minify setting is set to true
the LESS compiler will add .min
to the created minified version of the css files: default.less
would be compiled to the minified 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
to auto
, the plugin will try to automatically determine the folder where the CSS should be compiled to. It works best when you compile a single css file that imports other CSS files. If you work with multiple CSS files within one project that get compiled seperately, consider using the shadow
setting instead.
The auto
setting recognizes the following project setups:
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 thecss
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 namedcss
the compiled CSS files will be placed in thecss
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
folder into a shadow css
folder. It is expected your LESS files are stored in a folder named less
. Within this folder you are free to create any number of subfolder to organise your LESS files. When you compile a single file or all files through the menu command, the string less
will be replaced with css
in the file path. For example, if you have this file structure:
[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
to see parse errors in a pop up window
autoprefix
Set to true
to add prefixes to css after conversion from less
silent
Set to true
to stop any warnings from being shown.
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
file. A default project file looks like this:
{
"folders":
[
{
"path": "<path_to_project_folder"
}
]
}
You can add the less2css settings like this:
{
"folders":
[
{
"path": "<path_to_project_folder"
}
],
"settings":
{
"less2css":
{
"autoCompile": false,
"minify": false
}
}
}
Now the user settings autoCompile
and minify
will be overriden by the project setting.