How do I compile LESS files every time I save a document?
The best solution out there I've found is the one recommended on the official LESS website: https://github.com/jgonera/autoless. It is dead simple to use. Also it listens to the changes in the imported files to compile.
How to compile multiple files at once from command line?
By default the command line compiler (lessc) which can be installed by running npm install less
compiles a single Less file into a single.css file.
Depending of the structure of your project and Less files you should choose how to compile all your Less files.
When you want to compile each Less file into a CSS file you can write some command line scripting that iterate over your files and compile each by invoking the lessc compiler. Probably you should better consider to use a task runner for instance gulp-less or grunt-contribe-less.
In most situations the Less code in the different files is related, one file defined variable and mixins used in other files and so on. For that situation you can create a single project.less file which imports the other files:
project.less:
@import "variable.less";
@import "theme.less";
Now you will have to compile only the project.less
. You can do this by running lessc project.less project.css
. The preceding command compiles your Less code into a single CSS again.
To answer you question only theoretical, when your Less files do not depend on each other and your only want to compile them all into a single CSS file, you can run (on linux/unix):
paste -s less/*.less | lessc - > css/project.css
ANT script to compile all (css) LESS files in a dir and subdirs with RHINO
You could use the <fileset>
to include all the less
files need to be compiled. Later, you could use<mapper>
to mark the corresponding detination css
file.
<project name="test" default="main" basedir="../../">
<property name="css.dir" location="public/css"/>
<property name="tool.less" location="bin/less/less-rhino-1.1.3.js"/>
<property name="tool.rhino" location="bin/tools/rhino/js.jar"/>
<target name="less" description="Convert LESS to CSS then concatenate and Minify any stylesheets">
<echo message="Converting LESS to CSS..."/>
<!-- Clear the former compiled css files -->
<delete includeemptydirs="true">
<fileset dir="${css.dir}" includes="*.css, **/*.css" defaultexcludes="false"/>
</delete>
<apply dir="${css.dir}" executable="java" parallel="false" failonerror="true">
<!-- Give the input bundle of less files-->
<fileset dir="${css.dir}">
<include name="*.less"/>
</fileset>
<arg value="-jar" />
<arg path="${tool.rhino}" />
<arg path="${tool.less}" />
<srcfile/>
<!-- Output the compiled css file with corresponding name -->
<mapper type="glob" from="*.less" to="${css.dir}/*.css"/>
<targetfile/>
</apply>
</target>
</project>
How do I compile LESS files every time I save a document?
The best solution out there I've found is the one recommended on the official LESS website: https://github.com/jgonera/autoless. It is dead simple to use. Also it listens to the changes in the imported files to compile.
PHPStorm: How do I setup LESS to output to CSS directory with file watcher?
See my related answer for JADE file watcher, I believe it would be the same for LESS.
The trick is to use $FileDirPathFromParent(dir)$
macro:
$ProjectFileDir$/css/$FileDirPathFromParent(less)$
will produce /project/path/css/dir/
for a file located in /project/path/less/dir/
directory.
How to automatically compile LESS into CSS on the server?
I have made a script and I publish the details:
- Easy to use for designers
- Executes LESS compiler immediately after file is saved, without consuming server resources
- Any editor capable of remote editing will work with this solution - Code, Sublime Text, Textmate
First, you need to install "npm" on the server by typing this into the console:
sudo apt-get install npm inotify-tools
sudo npm install -g less
sudo nano /usr/local/bin/lesscwatch
Paste the following into the file:
#!/bin/bash
# Detect changes in .less file and automatically compile into .css
[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }
inotifywait . -m -e close_write | while read x op f; do.
if [ "$f" == "$1" ]; then.
lessc $f > $2 && echo "`date`: COMPILED";.
fi
done
Save, exit, then execute:
sudo chmod +x /usr/local/bin/lesscwatch
You are all done. Next time you need to work with your LESS files, you will need to open terminal (Coda has a built-in), go to the folder of your file (using cd) and execute this:
lesscwatch main.less main.css
It will output information about successful compilations or errors. Enjoy.
Compile a referenced LESS file into CSS with PHP automatically
THIS ASSUMES LESSPHP v0.3.8+ Unsure about earlier versions, but you'll get the gist of how it works if it doesn't straight out of the box.
<link rel="stylesheet" type="text/css" href="styles/main.less" />
If you were using less.js to compile client side, make sure you change rel="stylesheet/less"
to rel="stylesheet"
1) Grab Lessphp I placed these files in /www/compilers/lessphp/
for the context of this demo
2) Make a PHP script that we can throw out LESS files at. This will deal with caching, compiling to CSS and returning the CSS as a response. I have placed this file at /www/compilers/
and called it lessphp.php
Most of this code was on the Lessphp site, except there were errors in it, and I have added the response at the end.
<?php
require "lessphp/lessc.inc.php";
$file = $_GET["file"];
function autoCompileLess($inputFile, $outputFile) {
// load the cache
$cacheFile = $inputFile.".cache";
if (file_exists($cacheFile)) {
$cache = unserialize(file_get_contents($cacheFile));
} else {
$cache = $inputFile;
}
$less = new lessc;
$less->setFormatter("compressed");
$newCache = $less->cachedCompile($cache);
if (!is_array($cache) || $newCache["updated"] > $cache["updated"]) {
file_put_contents($cacheFile, serialize($newCache));
file_put_contents($outputFile, $newCache['compiled']);
}
}
autoCompileLess('../' . $file, '../' . $file . '.css');
header('Content-type: text/css');
readfile('../' . $file . '.css');
?>
This will compile the LESS file (eg, styles/main.less
) to a cache file and a CSS file (eg, styles/main.less.css
).
3) Add a mod_rewrite
rule so that any LESS files a user requests are redirected to our compiler, giving it its path. This was placed in the root .htaccess
file.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^([^.]*\.less)$ compilers/lessphp.php?file=$1 [R,QSA,L]
</ifModule>
If you are using WordPress, this rule will need to come after it - even if WordPress is in a sub directory, it seems to overwrite these rules, and LESS compilation will not occur for referenced files which exist below (directory wise) WordPress's .htaccess
rules.
4) Your LESS code should be relatively referenced in relation to the compilers location. Additionally, Lessphp compiler will fail if there are empty attributes, eg. background-color: ;
If all is working well, the following should occur:
Directly browse your LESS file
http://domain.com/styles/main.less
Be automatically redirected to
http://domain.com/compilers/lessphp?file=styles/main.less
Be presented with minified CSS
main.less.css
andmain.less.cache
should now exist in the same directory as your LESS fileThe last modified dates shouldn’t change unless you update your LESS file
Related Topics
How to Nest Media Queries Within Media Queries
How to Solve the Table Row Background Image Problem, in Chrome, in Multi Celled Tables
Svg + CSS3 Animation Not Working with Link Markup
404 Errors on Bundled Jquery CSS, VS2012 Publishing to Azure
CSS Image Layouting Before Image Loaded
Understanding Display:Table-Cell; Functioning
What Does Hash (#) Sign Do Outside Loops in SASS
Bootstrap 4 Align Elements Right Inside a Col Div
Css3 Transitions: Is There an on Click Option Without Using Jquery
Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class
Extracting Content in :After Using Xpath
How to Have Multiple Columns That Consume 100% Height Using Twitter Bootstrap
How to Change a Background Image Opacity Without Changing on Div Content
Rounding Numbers in SASS and Adjusting the Amount of Decimals
Set Textfield Height Material-Ui
Cssrules/Rules Are Null in Chrome