Skip to content

Yii extension for compiling LESS files client and server-side.

License

Notifications You must be signed in to change notification settings

mayankbatra/yii-less

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

yii-less

Less is an extension for the Yii PHP framework that allows developers to compile LESS files into CSS using the native JavaScript compiler. LESS can be compiled both client-side using less.js and server-side using lessc. Less comes with two compilers, a client compiler that uses less.js and a server compiler that uses lessc.

Requirements

Credits

Thanks to my friend Sam Stenvall (negge) for providing me with his version of the server-side compiler.

Usage

Setup

Download the latest version, unzip the extension under protected/extensions/less and add the less component to your application configuration. Below you can find example configurations for both compilers.

Client-side

return array(
  'components'=>array(
    .....
    'less'=>array(
      'class'=>'ext.less.components.Less',
      'mode'=>'client'
      'files'=>array(
        'less/styles.less'=>'css/styles.less',
      ),
    ),
  ),
);

Server-side

In order to compile your LESS server-side you need to download and install Node.js. When you have installed Node.js use npm (Node Packaged Modules) to install the less module.

return array(
  'components'=>array(
    'less'=>array(
      'class'=>'ext.less.components.Less',
      'mode'=>'server'
      'files'=>array(
        'less/styles.less'=>'css/styles.less',
      ),
      'options'=>array(
        'nodePath'=>'path/to/node.exe',
        'compilerPath'=>'path/to/lessc',
      ),
    ),
  ),
);

Configuration

Below you can find a list of the available configurations (with default values) for each compiler.

Client-side

'less'=>array(
  'class'=>'ext.less.components.Less',
  'mode'=>'client' // client or server
  'files'=>array( // files to compile (relative from your base path)
    'less/styles.less'=>'css/styles.less',
  ),
  'options'=>array( // compiler options
    'env'=>'production', // compiler environment, either production or development
    'async'=>false, // load imports asynchronous?
    'fileAsync'=>false, // load imports asynchronous when in a page under a file protocol
    'poll'=>1000, // when in watch mode, time in ms between polls
    'dumpLineNumbers'=>'mediaQuery', // enables debugging, set to comments, mediaQuery or all
    'watch'=>true, // enable watch mode?
  ),
),

Server-side

'less'=>array(
  'class'=>'ext.less.components.Less',
  'mode'=>'server' // client or server
  'files'=>array( // files to compile (relative from your base path)
    'less/styles.less'=>'css/styles.less',
  ),
  'options'=>array( // compiler options
    'basePath'=>'path/to/webroot', // base path, defaults to webroot
    'nodePath'=>'path/to/node.exe', // absolute path to nodejs executable
    'compilerPath'=>'path/to/lessc', // absolute path to lessc
    'strictMode'=>false, // force evaluation of imports?
    'compression'=>false, // enable compression, either whitespace or yui
    'optimizationLevel'=>false, // parser optimization level, set to 0, 1 or 2
    'forceCompile'=>false, // compile files on each request?
  ),
),

Registering the compiler

When you have everything setup and configured you need to register the compiler. To do that, call its register method inside the <head> tag in the layout(s) in which you wish to include the stylesheets.

<head>
  <?php Yii::app()->less->register(); ?>
</head>

protected/views/layouts/main.php

About

Yii extension for compiling LESS files client and server-side.

Resources

License

Stars

Watchers

Forks

Packages

No packages published