Tag: LESS

It uses the Less.php Compiler.

Installation

1. Download the latest release
2. Unzip it into your wp-content/plugins directory
3. Activate the plugin in WordPress

Compiler

This first page allows you to write and compile LESS. The resulting stylesheet is automatically enqueued.

Variables

This second page lists all registered variables, and allows you to edit their values upon compiling.

PHP Configuration

add_filter( 'less_configuration', 'my_less_config' );
function my_less_config( $config ) {
  $my_variables = array( 'less/variables.less' );
  $my_imports = array(
    'less/bootstrap.less',
    'less/theme.less'
  );
  return array_merge_recursive( $config, array(
    'variables' => $my_variables,
    'imports'   => $my_imports
  ) );
}

Configuration of the plugin is optional, but you should at least register your variables if you are using a CSS framework.

Paths to LESS files are relative to the theme directory.

Use the filter 'less_configuration' to return your configurations array.

• ‘variables‘ (array)
  In order to list and edit your LESS variables on the plugin dedicated page, it is necessary to register their “definition” file(s). It is assumed that those files’ only role is to declare variables and their values.
• ‘imports‘ (array)
  It will prepend the code to compile with an @import directive for each listed file. Useful to compile dependencies, and to “hide” them from the Compiler page. It is necessary to hit the “Compile” button once for these imports to be compiled.
• ‘cache‘ (string)
  Allows you to define the path to your cache directory. This directory has to be writable (0755). The default cache directory path is wp-content/cache.
• ‘search‘ (boolean)
  Wether or not to display the “Search Variables” filter box. It can come handy if you have a lot of variables. Default is true.

Once registered, you can access any variables with the function less_get( 'my-variable' );, or override its value (upon what has been set on the Variables page) with less_set( 'my-variable', 'my-value' ).

It is also possible to use @import directives, as well as any LESS language features, straight from the Compiler page.

Enqueuing external LESS

Out of the main stylesheet, simply use the WordPress wp_enqueue_style function to enqueue separated LESS files.

add_action( 'wp_enqueue_scripts', 'my_other_less_enqueue' );
function my_other_less_enqueue() {
  wp_enqueue_style( 'my-other-handle', get_template_directory_uri() . '/my-other-file.less', array( 'wm-less' ) );
}

It will be compared to the cached version, compiled if changes occurred, and the resulting stylesheet will be enqueued.
Don’t forget to set the main LESS stylesheet handle 'wm-less' as a dependency (… if it is one).