Una de las nuevas características que se encuentran en Joomla! 3 es la aplicación de LESS. Muchos han oído hablar de LESS, lo que es, y cómo puede ser utilizado, pero para aquellos interesados ​​en el aprendizaje (o refrescar el mismo) a continuación les expongo algunos de los beneficios y la manera de hacer LESS en Joomla!.

LESS es una hoja de estilo dinámica. Puede ser útil para comprender LESS, pensando que es similar a PHP. De la misma manera que PHP es interpretado por el servidor y genera un código HTML correspondiente, LESS es interpretado por el servidor y da salida a la CSS correspondiente. Es así de simple.

Para ser más específicos, LEES extiende las CSS con una variedad de características adicionales. Las tres características de este artículo se centrará en : variables, mixins y funciones.

Variables

Con LESS se puede especificar un conjunto de variables que pueden ser reutilizadas en toda la hoja de estilos. A continuación vamos a definir tres variables y luego demostrar cómo se utilizan en toda la plantilla.

@primary : #336699;
@secondary : #444444;
@bordercolor : #d5d4d4;

Una vez que estas variables han sido definidas, pueden ser usadas en cualquier lugar más tarde.

a.readon 
{
 color: @secondary;
}
h1 
{
 color: @primary;
 border: 1px solid @bordercolor;
}

Cuando el código es leído por el servidor, escribirá el código CSS similar a como se usaría para verlo.

Es así de simple. Puede parecer en este ejemplo que esto no es muy beneficioso o que represente un ahorro de tiempo, pero en el ámbito de una plantilla completa con cientos de líneas de código se hace muy fácil de cambiar un estilo cambiando simplemente una sola variable en la parte superior de el archivo.

Mixins

Esta es una manera elegante de decir que se pueden añadir conjuntos completos de estilos dentro de otro estilo. En algunas formas su muy similares a las variables, sólo que en lugar de un único valor, ahora estamos incluyendo estilos enteros. A continuación se muestra un ejemplo de esta técnica.

.thinborder(@radius: 5px, @color: #d5d4d4, @width: 1px) 
{
 border: @width solid @color;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
 border-radius: @radius;
}

Esto podría entonces ser usado de la siguiente manera:

.moduletable {
 .thinborder(2px,#336699);
}

Como te darás cuenta, puedes modificar cualquiera o ninguno de los parámetros. Cualquier parámetro que no este definido usará el valor por defecto (en el ejemplo anterior, los valores predeterminados de anchura a 1 píxel). Una vez más, esto proporciona una fantástica manera de tener una hoja de estilos bien administrada sin enormes cantidades de líneas adicionales de estilos. Una vez más, simplemente cambiando el estilo por defecto se actualiza cada línea correspondiente en toda la hoja de estilos.

Funciones

El último elemento a considerar es la característica de las funciones LESS. Funciones LESS son una forma de llevar a cabo operaciones simples en las variables. Podemos usar la multiplicación, división, suma y resta. Es una forma muy poderosa para crear un estilo único y luego reutilizar ese estilo fácilmente en toda la hoja de estilo sin dejar de ser capaz de manipular los estilos para situaciones únicas. Vea el siguiente ejemplo:

//Define variables
@borderwidth : 2px;
@background : #222222;

.moduletable {
 background-color: (@background / 4);
 border: (@borderwidth + 1) solid (@background * 2);
}

Con la creación de este estilo y añadiendo funcionalidad LESS a casos concretos, podemos crear rápidamente estilos estandarizados en toda la hoja de estilo, manteniendo casos únicos cuando sea necesario.

El código anterior muestra un caso en el que se establece un color de fondo predeterminado y luego usar ese color de fondo para crear variaciones según sea necesario. En este ejemplo concreto se aprovecha el color de fondo que se utilizará, tanto para el color del borde, como para el color de fondo, así como sus variaciones.

Hay otras formas en las que se usa LESS, sin embargo, por el bien de la longitud de este artículo no nos ocuparemos de otros ejemplos, pero en vez, volvemos a lo como LEES puede ser utilizada dentro de una plantilla Joomla!. Si tiene preguntas adicionales sobre LESS puede ver más información en la página oficial, http://lesscss.org

Cómo LESS es implementado en las plantilass Joomla!

Joomla! 3 incluye una biblioteca JUI que esta en la carpeta "media" en la raíz de la instalación. Esta carpeta contiene todos los archivos LESS básicos disponibles para su uso. Las plantillas Joomla pueden usar esos archivos, importándolos en los archivos LESS específicos de la plantilla. A continuación se muestra un ejemplo de la importación:

// CSS Reset
@import "../../../media/jui/less/reset.less";
// Grid system and page structure
@import "../../../media/jui/less/scaffolding.less";
@import "../../../media/jui/less/grid.less";
@import "../../../media/jui/less/layouts.less";

// Base CSS
@import "../../../media/jui/less/type.less";
@import "../../../media/jui/less/code.less";
@import "../../../media/jui/less/forms.less";
@import "../../../media/jui/less/tables.less";

La lista completa de las importaciones de archivos disponibles se puede encontrar aquí: http://jui.kyleledbetter.com/

Una vez que haya importado las clases bases de LESS que usted desea en su plantilla y haber añadido sus propios estilos LESS, a continuación, puede compilar un archivo template.css para controlar todo su sitio con un estilo unificado. Para compilar los estilos LESS se tendrá que ejecutar un compilador para generar el archivo CSS. No deje que la idea de compilar te asuste. Es simplemente un término elegante usado para definir el proceso de escribir los archivos CSS de los archivos LESS (recuerde que todas las variables, mixins y funciones tienen que ser analizadas y escritas como CSS normal). Las plantillas predeterminadas de Joomla usan una pequeña aplicación de la plataforma Joomla para generar su CSS. El código está disponible para copiar y utilizar, para los estilos personalizados de la plantilla personal, en el directorio GitHub del CMS Joomla!.

https://github.com/joomla/joomla-cms/blob/master/build/generatecss.php

Este archivo contiene una función doExecute singular que cuando se ejecuta escribirá los archivos CSS en base a a la clase estándar de Joomla! (JLess). Ejecutar y generar el CSS y su nueva marca de estilos de plantilla está lista para salir.

En conclusión

No creo que este proceso sea realmente demasiado técnico para utilizar. Es muy fácil de entender y usted se sorprenderá con lo fácil que es de ponerlo en práctica. Empiece hoy mismo escribiendo archivos LESS. Aprovecha el formato disponible en la carpeta de la raíz JUI / LESS y escriba su próxima plantilla con el poder de LESS.

Artículo Original: Do LESS in Joomla!