Joomla! Documentation™

La mayoría de las hojas de estilo de las plantillas predeterminadas de Joomla! 3.0 son escritas usando LESS y luego se compilan para generar los archivos CSS.

¿Dónde se pueden encontrar los bloques de construcción .less y el compilador?

Los bloques de contrucción .less se encuentran en media/jui/menos/. Los archivos .less de la plantilla específica se encuentran en templates/<nombre_plantilla>/less/.

El script contenedor del generador CSS , compilador de LESS, y otras herramientas de construcción similares se encuentran en el directorio build/ del Joomla! fuente ubicado en GitHub. Consulta Git para Codificadores para más información sobre el uso de GitHub. El directorio de construcción sólo está disponible desde el sitio de origen, no está incluido en una versión oficial de Joomla!.

Cómo volver a generar las hojas de estilo CSS

Para volver a generar todos los archivos CSS de la distribución de Joomla!, tendrás que ejecutar un script de generación como una aplicación CLI.

Por ejemplo:

cd joomla-cms/build
c:\xampp\php\php.exe generatecss.php

Compilar tus propios archivos LESS para tu plantilla

Para compilar archivos less para tu propia plantilla, tendrás que hacer una copia del script generatecss.php y ajustarlo para que se adapte a tu plantilla.

Alternativamente, puedes utilizar un plugin Compilador LESS que compile el archivo .less automáticamente cuando la página se recarga: http://extensions.joomla.org/extensions/miscellaneous/development/22424

Más alternativas y herramientas en un reciente artículo de Joomla! Magazine: http://magazine.joomla.org/issues/issue-may-2013/item/1289-tools-to-do-less

No a todos los compiladores LESS son iguales

El compilador LESS usado para el núcleo de Joomla!, para lograr consistencia en el estilo del código, se obtiene a desde leafo.net/lessphp.

Si estás trabajando en tu propia plantilla puedes usar cualquier compilador que te guste.

Diferencia de CSS vs LESS en las importaciones

Los archivos .LESS principales y de inicio, por ejemplo en protostar, se encuentran en

/templates/protostar/less/template.less

Si abres ese archivo puedes encontrar muchas declaraciones @imports - las importaciones proceden de muchos lugares diferentes. A diferencia de las importaciones en CSS, las importaciones en LESS se compilan en un solo archivo CSS. Esto dará lugar a un menor número de peticiones http y acelerará tu sitio.

De CSS existente a LESS / importar archivos CSS

Puede que desees añadir a tus archivos CSS ya existentes clases LESS potenciando tu plantilla o empezar con lo que tienes. Todas las declaraciones CSS son compatibles con LESS por lo que sólo debes cambiar el nombre de la extensión de tus archivos de .css a .less y puedes compilarlos y usarlos. Entonces puedes, paso a paso, hacer uso de las grandes características dinámicas que LESS tiene para ofrecer: variables, mixins, operaciones y funciones. Mira http://www.lesscss.org

Aviso: para los siguientes ejemplos de referencia se usa la plantilla Protostar predeterminada, para mayor claridad. Tus rutas pueden ser diferentes.
Aviso: Si deseas personalizar la plantilla Protostar es una buena idea copiar la plantilla y personalizarla después - para que las actualizaciones de Joomla! no sobrescriba las personalizaciones.

Opción 1: importar tus archivos .css como .less

(un poco de trabajo pero vale la pena, en mi humilde opinión)

Ahora vamos a suponer que deseas incluir tus archivos personalizados y que se procesado por el compilador LESS - NO necesitas volver a escribir tus archivos .css para LESS, porque los .css tal como están funcionan igual de bien. La única cosa que tienes que hacer es cambiar el nombre de la extensión de tus archivos .css por .less y añadir una declaración @import en el ya mencionado principal /templates/protostar/less/template.less

Supongo que pones tus archivos .css personalizados, con el nombre de la extensión cambiada a .less en la carpeta /templates/protostara/less. Ahora abre /templates/protostara/less/template.less y en la parte inferior del archivo importa tu archivo .less personalizado para que se sobrescriban las declaraciones:

@import "modules.less";
@import "components.less";
@import "articles.less";

Si ahora compilas el archivo principal template.less terminaras con un principal template.css optimizado y minimizado (si lo deseas). También se redujeron tus peticiones http y el sitio se debe cargar más rápido. Ahora puedes comenzar, paso a paso, en personalizar los archivos .less para utilizar variables y otras cosas interesantes que http://lesscss.org tiene para ofrecer.

Opción 2: importar tu .css / no funciona para sobreescribir

En /templates/protostar/less/template.less importa tus archivos .css y se incluirán como importaciones en la plantilla template.css:

@import "../css/modules.css";
@import "../css/components.css";
@import "../css/articles.css";

Pero de esta manera no obtienes ningún tipo de optimización. Y un gran problema es que esta importación se hace siempre en la parte superior antes de otras declaraciones - de modo que no puedes sobrescribir una declaración existente.

Más información: http://lesscss.org/#usage (Sección Importación)

Referencias

http://kyleledbetter.com/jui/less/ - Ejemplo de la construcción de su propia plantilla.less