Joomla LESS

Most of the Joomla 3.0 default template style sheets are written using LESS and then compiled to generate the CSS files.

Where Can You Find the .less Style Sheets and Compiler?

The .less building blocks are located in media/jui/less/. The template-specific .less files are located in templates/<templatename>/less/.

The CSS generation wrapper script, LESS compiler, and other similar build tools are located in the build/ directory of the Joomla source located on GitHub. Refer to Git for Coders for more information on using GitHub. The build directory is only available from the Joomla source. It is not included in an official Joomla release.

How to Regenerate the CSS Style Sheets

To regenerate all the CSS files from a Joomla core distribution, execute the generation scripts as a CLI application:

cd joomla-cms/build
c:\xampp\php\php.exe generatecss.php

Compiling Your Own LESS Files For Your Template

To compile LESS files for your own template, you will need to take a copy of the generatecss.php script and adjust it to suit your template.

Alternatively you can use a LESS Compiler plugin that compiles your .less files automatically on page reload.

More alternatives and tools are to be found in a Joomla! Magazine article.

Not All LESS Compilers are Equal

The LESS compiler used for the Joomla core for code style consistency is obtained from leafo.net/lessphp.

If you're working on your own template, use any compiler you like.

Difference CSS vs LESS Imports

The main .less file and starting point in Protostar is located in /templates/protostar/less/template.less. If you open that file you will find many @imports—imports from many places. Unlike imports in CSS, imports in LESS get compiled to a single CSS file. This results in fewer HTTP requests and speeds up your site.

From Existing CSS to LESS/Import CSS Files

You may want to add your existing CSS files and classes to your LESS-powered template or start with what you have. All CSS declarations are compatible with LESS so just rename your .css files to .less and you can compile and use them. You can then make use of the great dynamic features LESS has to offer: variables, mixins, operations and functions. See the lesscss.org website.

Notice: The examples below reference the default Protostar template for clarity. Your paths may be different.

Notice: If you want to customize the Protostar template, copy the template and customize it afterwards so that Joomla! updates do not overwrite your customizations.

Option 1: Import Your .css as .less Files

(A little bit work but worth it.)

Now let's assume you want to include your custom files and get them parsed by LESS compiler. You do not need to rewrite your .css to LESS because plain .css works as well. The only thing you have to do is to rename your .css files to .less and add an @import statement into /templates/protostar/less/template.less.

You put your custom .css files renamed to .less into the /templates/protostar/less folder. Now open /templates/protostar/less/template.less and at the bottom of the file, import your custom .less files so that they override existing declarations:

@import "modules.less";
@import "components.less";
@import "articles.less";

If you now compile your main template.less file, you end up with one main template.css optimized and minified (if you wish). You also reduced your HTTP requests and the site should load faster. Now you can start in your custom.less files to use LESS variables and other features lesscss.org has to offer.

Option 2: Just Import Your .css/Does Not Work for Overriding

In /templates/protostar/less/template.less, import your .css files and they will be included as imports into main template.css:

@import "../css/modules.css";
@import "../css/components.css";
@import "../css/articles.css";

This way you do not get any optimization. Another big issue is that this import is always on top before other declarations so you can't override an existing declaration.

More information: lesscss.org