How To Use LESS with Joomla

390536_8367With its new version, Joomla has become even more useful. One of the several new implementations is the usage of LESS. Some people probably have already used it or been using it for some time but for the rest that want to learn what it is and how to use it here’s a tutorial on its benefits.

I think it’s easy to understand what LESS does if you compare it to PHP. Basically it’s a dynamic stylesheet. The server interprets PHP and outputs the appropriate HTML code. LESS works just like that but the server spits out the corresponding CSS instead. That’s the basic principle of how LESS works.

To be exact, LESS is an extension of CSS and adds quite a lot of new functionality but in this post I’ll discuss variables, functions and mixins.

Part 1 – Variables

You can create a bunch of variables with LESS and use them again and again in the same stylesheet. Lets defice a couple of variables and then I’ll show you how to use them in our template.

@primary : #336699;
@secondary : #444444;
@bordercolor : #d5d4d4;

Once you define them these variables can be utilized wherever you want. For example something like:

a.readon
{
color: @secondary;
}
h1
{
color: @primary;
border: 1px solid @bordercolor;
}

The server reads this code and outputs CSS in the traditional format. That’s pretty much it. I see how this example may not be enough to illustrate how all of this can be useful or if it even saves time but think about the whole template for a second. It has hundreds of lines of code but by using LESS you’re able to change a style across the whole template by just altering the variable.

Part 2 – Mixins

They’re basically just a way of adding whole groups of styles into another style if that makes sense. That’s pretty similar to how variables work but here we don’t have a single value but an entire style. Here’s how it works.

.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px)
{
border: @width solid @color;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
You can then do it like that:

.moduletable {
.thinborder(2px,#336699);
}

Notice how you’re able to change all of the parameters or none if you want to. If you don’t define a parameter the default value is going to be used which in the example I gave would be the default width of 1px. Isn’t that a great way to manage a stylesheet without a bucnh of extra lines of code? By just altering the default style all of the lines that are bound to it will update across the whole stylesheet.

Part 3 – Functions

Functions in LESS are used to do simple commands with variables. There’s multiplication, division, addition, and subtraction which can be used very effectively to easily generate one style, use it all over a stylesheet and still having the ability to change the style on per case basis.

How to use LESS with a Joomla template

IN Joomla version 3 there’s a JUI library stored in the root media folder. That’s where all of the essential LESS files you’ll need are stored if you got Joomla web hosting from a reputable company like http://www.alotspace.com/app-installer-php-scripts/joomla-web-hosting/. Then every template in your Joomla install can use these files by importing them into the LESS files for that particular template.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s