Enable LESS CSS in WordPress
LESS is an abstraction layer that adds some very powerful features to CSS. It
will speed up your development process and make your life that much easier. Find
out more from the links below and then head on back., (*1)
The addon allows you to write and edit .less files directly and
have WordPress do the job of compiling and caching the resulting CSS. It
eliminates the extra step of having to compile the .less files into CSS yourself
before deploying them., (*2)
Installation:
If you are using git to clone the repository, do the following:, (*3)
git clone git://github.com/sanchothefat/wp-less.git wp-less
If you are downloading the .zip or .tar, don't forget to download the lessphp
dependency too and copy it into the vendor/leafo/lessphp
directory., (*4)
Then install the lessphp dependency using:, (*5)
composer install
Alternatively, add "icit/wp-less" as a requirement to your composer.json, and add this git repository e.g.:, (*6)
{
"repositories": [
{
"type": "git",
"url": "https://github.com/sanchothefat/wp-less.git"
}
],
"require": {
"icit/wp-less": "dev-master"
}
}
Usage:
You can either install the script as a standard plugin or use it as an include within a theme or plugin., (*7)
For use with themes add the following lines to your functions.php:, (*8)
Within your .less files you can use the variable as if you had declared it in the stylesheet.
For e.g.:, (*9)
body { color: @color; }
Default variables
There are 2 default variables you can use without worrying about the above code:, (*10)
@themeurl is the URL of the current theme directory:, (*11)
body { background-image: url(@{themeurl}/images/background.png); }
*@lessurl** is the URL of the enqueued LESS file (this does not change inside imported files):, (*12)
.plugin-title { background-image: url(@{lessurl}/images/icon.png); }
@lessurl is useful in those cases where you have .less files inside plugins or
other non theme folder locations., (*13)
It is important to use these because you can't use relative paths - the compiled CSS is
stored in the uploads folder as it is the only place you can guarantee being
able to write to in any given WordPress installation. As a result relative URLs will
break., (*14)
PHP interface
register_less_function() allows you to create additional less compiler functions
for use in your stylesheet without having to touch the lessc class yourself., (*15)
register_less_function( 'double', function( $args ) {
list( $type, $value, $unit ) = $args;
return array( $type, $value*2, $unit );
} );
unregister_less_function() works in a similar way but unregisters any compiler
functions passed to it by name., (*16)
unregister_less_function( 'double' );
add_less_var() makes it easy to create or modify variables passed into the
compiler. Both arguments should be a string, as lessc will work out the type of
variable it is., (*17)
add_less_var( 'brandcolour', '#ec6704' );
remove_less_var() is the inverse of add_less_var() and only requires the
variable name to remove., (*18)
remove_less_var( 'brandcolour' );
Further Reading
Read the LESS.js documentation here., (*19)
Read the documentation specific to the PHP parser here., (*20)
Contributors
Big massive thanks to those whose contributions and discussion has helped to improve the plugin., (*21)
License
The software is licensed under the MIT Licence., (*22)
Wallogit.com
