Hojas de estilo avanzadas con Less css

Less css es una ampliación de la hoja de estilos css dotándola de la potencia suficiente para actuar como un lenguaje de programación. De esta manera Less css nos permite usar variables, funciones, operaciones aritméticas, anidamiento de estilos, etc. todo dentro de nuestro fichero css.

Less css estará incluido en los arquetipos Fundeweb 2.x a partir de la versión 0.0.7. Si la versión de tu proyecto es inferior, a continuación mostramos cómo configurar Less css en tu proyecto.

Para una información detallada consultar la web de Less css

En primer lugar deberemos crear un fichero css con el nombre que queramos al mismo nivel que el resto de ficheros css que conforman nuestra aplicación. Para este ejemplo lo llamaremos miFicheroLess.css.

Una vez creado nuestro fichero, deberemos configurar Less css incluyendo en el template.xhtml de nuestro proyecto, dentro de la sección <head> la carga de la libreria Less css y las hojas de estilo que debe tratar.

<h:head>
  ...
  <link rel="stylesheet/less" type="text/css" href="#{request.contextPath}/resources/css/miFicheroLess.css" />
  ...
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
  ...
</h:head>

La segunda línea simplemente carga la librería Less css. En la primera vemos que definimos un link de tipo stylesheet/less con la ruta a nuestro fichero Less css.

Es importante saber que aunque Less css tiene un alto grado de compatibilidad con css, existen pequeñas incompatibilidades en funciones nativas de css. Para solventar esto podemos hacer dos cosas:

Poner todas las propiedades css incompatibles en una hoja de estilo a parte no tratada con Less css.
Escapar las funciones incompatibles haciendo uso de ~“…“. Por ejemplo: filter: ~“alpha(opacity = (@{opacityPercentage}))”;

Con la primera linea le indicamos dónde estará nuestro fichero less css, mientras que con la segunda cargamos la librería Less css correspondiente.

Una vez configurado Less css su uso es muy sencillo, desde la parte xhtml usaremos las clases de manera normal. Desde el punto de vista del fichero css podremos hacer lo siguiente:

Creación y uso de variables

Las variables funcionan de forma similar a las constantes en los lenguajes de programación, permitiendo definir valores que podrán ser reutilizados en cualquier parte de la hoja de estilo. Para ello las definiremos en nuestro fichero css de la siguiente manera @nombreVariable: valorVariable. Por ejemplo:

@color: #5B83AD;
@color_claro: @color + #111;
 
.fondo{
 background-color:@color;
}

Anidamiento de estilos

Los anidamientos de estilos, comúmente llamados Mixins, son como clases css dinámicas, porque funcionan de forma similar a las clases CSS pero con características de funciones de programación.

Es decir que pueden ser llamadas desde otras clases para obtener su valor y además permiten parámetros, aunque no es necesario utilizarlos. Está características hace posible definir una clase dando flexibilidad para variar algunos estilos como el color o tamaño del elemento.

Por ejemplo:

@otro_color: #EEFF00;
 
.mi_mixin(color: valordefecto){
  font-size:2em;
  color:@color;
  margin:0.2em;
}
 
.mi_mixin2{
  font-size:2em;
  color:@otro_color;
  margin:0.2em;
}

También se pueden combinar estilos, por ejemplo:

@azul: #5B83AD;
 
.azul_borde{
  color: @azul;
  .bordeado ;
}
 
.bordeado {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

Código mejor estructurado

Less css nos permite organizar los estilos css de manera que sea más legible por parte de los programadores. Por ejemplo:

/*Sin less css*/
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
 
/*Con less css*/
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Less css nos proporciona un conjunto de funcionalidades avanzadas que permiten que el manejo de los css sea más limpio evitando repeticiones innecesarias de estilos o clases.

De igual manera añade cierta funcionalidad asociada a los lenguajes de programación para dotar a la hoja de estilos de cierta capacidad de procesamiento.

La guía con toda las funcionalidades que proporciona css está en la guía de referencia de Less

Hojas de estilo avanzadas con Less css

Configuración de Less css

Uso de Less css

Creación y uso de variables

Anidamiento de estilos

Código mejor estructurado

Resumen