How to Compile a Directory Full of Less CSS Files to CSS

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:

  1. Directly browse your LESS file http://domain.com/styles/main.less

  2. Be automatically redirected to http://domain.com/compilers/lessphp?file=styles/main.less

  3. Be presented with minified CSS

  4. main.less.css and main.less.cache should now exist in the same directory as your LESS file

  5. The last modified dates shouldn’t change unless you update your LESS file



Related Topics



Leave a reply



Submit