Cakeless un plugin para usar LESS en CakePHP

He creado un pequeño y muy simple plugin que compila LESS (mediante phpless) para poder tener hojas de estilo dinámicas en nuestras aplicaciones de CakePHP.

Puedes descargarlo o clonar el repositorio desde  

El plugin está liberado bajo la MIT license así que pueden tomarlo y hacer con él lo que tengan ganas. También los invito a participar para mejorarlo aportando ideas, correcciones, etc.

¿Cómo se usa?

Primero descomprimimos o clonamos el plugin en /app/plugins/cakeless.

A continuación lo incluimos en nuestra aplicación:

var $components = array('Cakeless.Cakeless');

Luego indicamos el archivo .less que deseamos compilar y la ruta y nombre del archivo compilado. Por ejemplo:

$lessExample = APP . 'plugins' . DS . 'cakeless' . DS . 'webroot' . DS . 'less' . DS . 'example.less';
$cssExample = APP . 'plugins' . DS . 'cakeless' . DS . 'webroot' . DS . 'css' . DS . 'example.css';

$this->Cakeless->compile( $lessExample, $cssExample );

Esto compilará el archivo de ejemplo incluido (/app/plugins/cakeless/webroot/less/example.less) en el archivo /app/plugins/cakeless/webroot/css/example.css.

Puedes usar este ejemplo para probar el funcionamiento pero quizás quieras ver un ejemplo más real de su uso. Aquí lo tienes:

$lessMainStyles = WWW_ROOT . 'less' . DS . 'main_styles.less';
$cssMainStyles = WWW_ROOT . 'css' . DS . 'main_styles.css';

$this->Cakeless->compile( $lessMainStyles, $cssMainStyles );

Nota importante: El archivo será compilado solamente si el modo de debug de nuestra aplicación es de 1 o mayor.

Luego, en las vistas o layouts simplemente enlazamos al archivo compilado como lo haríamos normalmente con cualquier archivo .css:

echo $this->Html->css( 'main_styles', null, array( 'media' => 'screen, projection' ) );

Voila! Ya tenemos LESS funcionando en nuestra aplicación. Espero que les resulte de utilidad.

Deja tu comentario

Tip: Pudes usar las siguientes etiquetas si sabes cómo: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

acerca de este blog

Este es un espacio donde hablaremos de Diseño de Interfaces, Experiencia del usuario (UX), Arquitectura de la Información (AI), Usabilidad y diseño y desarrollo para medios digitales en general.

También intento canalizar en este blog mis inquietudes profesionales y proyectos personales.

máquina del tiempo