https://github.com/roborourke/wp-less

Provides a LESS compiler compatible with wp_enqueue_style() for rapid CSS development in themes and plugins.
https://github.com/roborourke/wp-less

Last synced: 12 months ago
JSON representation

Provides a LESS compiler compatible with wp_enqueue_style() for rapid CSS development in themes and plugins.

• Host: GitHub
• URL: https://github.com/roborourke/wp-less
• Owner: roborourke
• License: mit
• Created: 2011-12-09T11:58:17.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2017-09-07T09:37:05.000Z (almost 9 years ago)
• Last Synced: 2025-03-21T10:02:11.390Z (over 1 year ago)
• Language: PHP
• Homepage:
• Size: 70.3 KB
• Stars: 217
• Watchers: 21
• Forks: 54
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: license.txt

Awesome Lists containing this project

README

          
# 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.

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.

## Installation:

If you are using git to clone the repository, do the following:

    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](https://github.com/leafo/lessphp) and copy it into the `vendor/leafo/lessphp`

directory.

Then install the lessphp dependency using:

    composer install

Alternatively, add "icit/wp-less" as a requirement to your composer.json, and add this git repository e.g.:

    {

        "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.

For use with themes add the following lines to your functions.php:

```php

```

Within your `.less` files you can use the variable as if you had declared it in the stylesheet.

For e.g.:

```css

body { color: @color; }

```

### Default variables

*There are 2 default variables* you can use without worrying about the above code:

**`@themeurl`** is the URL of the current theme directory:

```css

body { background-image: url(@{themeurl}/images/background.png); }

```

*`@lessurl`** is the URL of the enqueued LESS file (this does not change inside imported files):

```css

.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.

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.

### 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.

```php

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.

```php

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.

```php

add_less_var( 'brandcolour', '#ec6704' );

```

`remove_less_var()` is the inverse of `add_less_var()` and only requires the

variable name to remove.

```php

remove_less_var( 'brandcolour' );

```

## Further Reading

[Read the LESS.js documentation here](http://lesscss.org/).

Read the documentation [specific to the PHP parser here](http://leafo.net/lessphp/docs/).

## Contributors

Big massive thanks to those whose contributions and discussion has helped to improve the plugin.

* [Tom Willmot](https://github.com/willmot)

* [Franz Josef Kaiser](https://github.com/franz-josef-kaiser)

* [Rarst](https://github.com/rarst)

## License

The software is licensed under the [MIT Licence](http://www.opensource.org/licenses/mit-license.php).