Estilos dinámicos con Less CSS

Estilos dinámicos con Less CSS: Less es un lenguaje de hojas de estilo dinámico, que se puede ejecutar en el lado del cliente con Javascript o en el lado del servidor con Node.js. Además es totalmente multiplataforma y de código abierto.

Less añade todo lo que alguna vez hemos echado en falta con CSS. Cosas como variables, operaciones y mixins.

Cómo usar Less

En el lado del cliente

Primero descargamos el archivo less.js desde la web oficial de less
Luego creamos una hoja de estilos Less, por ejemplo style.less y la añadimos al header de nuestro HTML de la siguiente manera:

Código :

<link rel="stylesheet/less" href="less/style.less" /> 

Por último hacemos referencia a less.js que descargamos anteriormente

Código :

<script type="text/javascript" src="js/less-1.2.0.min.js"></script>

[nota:e957cacdf1]Es muy importante que la hoja de estilos se añada antes que el script. [/nota:e957cacdf1]

En el lado del servidor

Para compilar los archivos Less tenemos varias opciones:
Para Windows, mac y Linux se puede usar simpLESS o si prefieren la línea de comandos, pueden instalar Less vía npm.

Conociendo el poder de Less

Vamos a ver la gran variedad de funcionalidades que nos ofrece Less.

Comentarios

Podemos usar los comentarios normales de CSS y estos serán visibles en el código resultante:

Código :

/* Comentario visible en el css resultante */

Pero también podemos usar comentarios que solo son visibles en el archivo Less:

Código :

//Comentario no visible en el css resultante

Variables

Las variables en Less funcionan exactamente igual que en cualquier lenguaje de programación y se usan de la siguiente manera:

Código :

@link-color: #F34F25;
@h-color: #20496C;
a {
   color: @link-color;
}
h1, h2 {
   color: @h-color;
}

En este ejemplo evitamos tener que estar repitiendo el código del color por toda la hoja de estilos y si quisiéramos cambiar de color, simplemente cambiamos el valor de la variable y no ir cambiando uno por uno en todos los lugares que se use.

Alcance de las variables

Como en cualquier otro lenguaje, en Less las variables también tienen alcance, por ejemplo:

Código :

#link1 {
   @link-color: #F34F25;
   color: @link-color;
}
#link2 {
   color: @link-color;
}

Esto nos daría error, pues la variable está definida localmente dentro del elemento #link1.

Otro ejemplo:

Código :

@link-color: #F34F25;
#link1 {
   color: @link-color;
}
#link2 {
   @link-color: #000;
   color: @link-color;
}

¿Qué pasará aquí? #link1 usará el color naranja, mientras #link2 usará el color negro.

Operaciones

Con la ayuda de las operaciones podemos sumar, restar y multiplicar, teniendo una gran flexibilidad a la hora de manipular valores, por ejemplo:

Código :

@border: 2px;
h1 {
   border-top: @border;
   border-bottom: @border + 2;
   border-left: @border - 1;
   border-right: @border * 3;
}

Pero las operaciones no son válidas sólo para los valores numéricos, también nos sirven para manipular colores, ejemplo:

Código :

@box-color: #1E6381;
@border: 1px;

.box {
    background: @box-color;
    border: @border * 6 solid @box-color - #222;
    width: 100px;
    height: 100px;
}

Funciones de color

Less nos ofrece una gran variedad de funciones para manipular colores y su uso es muy sencillo: nombrefuncion(color, porcentaje), por ejemplo:

Código :

@color: #1E6381;

.box {
   background: darken(@color, 20%);
}

Además podemos combinar el uso de estas funciones:

Código :

.box {
   background: lighten(spin(@color, 8%), 20%);
}

También podemos extraer información de los colores de la siguiente forma:

Código :

hue(@color);
saturation(@color);
lightness(@color);
alpha(@color);

La lista completa de funciones: lighten, darken, saturate, desaturate, fadein, fadeout, fade, spin y mix.

Anidación

Cuando usamos CSS si queremos que un elemento que está dentro de otro tenga un estilo diferente al resto de la página lo haríamos de la siguiente manera:

Código :

.block div {
    float: left;
    margin-right: 20px;
    margin-bottom: 5px;
    width: 100px;
    height: 100px;    
}

.block span {
    color: #FFF;
    display: block;
    margin-left: 22px;
    margin-top: 35px;
}

Usando Less podemos lograr lo mismo de una forma más ordenada e intuitiva usando anidaciones:

Código :

.block {
    div {
       float: left;
       margin-right: 20px;
       margin-bottom: 5px;
       width: 100px;
       height: 100px;
    }
    span {
       color: #FFF;
       display: block;
       margin-left: 22px;
       margin-top: 35px;
    }
}

Mixins

Esto es lo que más me gusta de Less, con los mixins vamos a evitar estar repitiendo una y otra vez lo mismo por toda la hoja de estilos, con lo cual seremos mucho más productivos.
Los mixins en Less son como las funciones en otros lenguajes de programación, vamos a ver un ejemplo.

Si quisiéramos poner bordes redondeados a un div con solo CSS, lo haríamos de la siguiente manera:

Código :

.box {
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
    border-radius:5px;
}

¿Y si quisiéramos que otra clase también tuviera los border redondeados 5px?, sí, podríamos hacer una clase de bordes redondeados a 5px y agregar 2 clases al elemento, pero esto lo podemos lograr de una forma más limpia usando mixins de esta forma:

Código :

.rounded() {
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
    border-radius:5px;
}

.box {
    width: 100px;
    height: 100px;
   .rounded;
}

Nótese los paréntesis al final del nombre del mixin, si no hiciéramos esto el código se añadiría como una clase cualquiera.

Pero ¿Qué hacemos si queremos que el valor de los bordes redondeados sea 3px y no 5px? ¿Hacemos otro mixin igual pero con 3px?. No, los mixins son hermosos y podemos pasarles parámetros:

Código :

.rounded(@value) {
   -webkit-border-radius: @value;
   -moz-border-radius: @value;
    border-radius: @value;
}

Para usarlo solamente hacemos esto:

Código :

.box {
   .rounded(3px);
}

También podemos poner parámetros por defecto:

Código :

.rounded(@value:5px) {
   -webkit-border-radius: @value;
   -moz-border-radius: @value;
    border-radius: @value;
}

#box1{
   .rounded; //Bordes redondeados a 5px
}

#box2 {
   .rounded(3px); //Bordes redondeados a 3px;
}

Un ejemplo un poco más complejo:

Código :

.rounded(@value:5px) {
   -webkit-border-radius: @value;
   -moz-border-radius: @value;
    border-radius: @value;
}

.button(@radius:2px, @background: #333, @color: #fff, @padding: 5px, @width: 90px){
  .rounded(@radius);
  background: @background;
  color: @color;
  padding: @padding;
  width: @width;
}

#button {
  .button(5px);
}

Como podemos comprobar en este ejemplo, podemos crear mixins con múltiples parámetros y utilizar un mixin dentro de otro.

También podemos usar todos los parámetros en una sola línea:

Código :

.border(@width: 1px, @type: solid, @color: #000){
   border:@arguments;
}

#box2 {
   .border(2px, dotted);
}

El resultado será:

Código :

#box2 {
   border:2px dotted #000;
}

Espacios de nombres

Los espacios de nombres en cualquier lenguaje de programación se usan para agrupar funcionalidades. En Less podemos hacer lo mismo con la ayuda de los mixins.

Código :

#namespace1{
   p {
       margin: 12px;
   }
   a {
       color: #000;
   }
   .submit{
       background: blue;
       color: #fff;
       padding: 5px;
   }
}

#namespace2{
   p {
       margin: 10px;
   }
   a {
       color: #fff;
   }
   .submit{
       background: red;
       color: #000;
       padding: 2px;
   }
}

Se usan de la siguiente manera:

Código :

.submit-button {
   #namespace1 > .submit;
}

.submit-button2 {
  #namepsace2 > .submit
}

Esto es muy útil por ejemplo a la hora de desarrollar temas.

Importar

Se pueden importar otros archivos Less o CSS a nuestro archivo de trabajo actual y usar todos los mixins, variables, etc. que tengamos definidos en ellos. De esta forma podemos tener librerías reutilizables para todos nuestros proyectos.

Código :

@import “mixins.less”
@import “variables”
@import “reset.css”

La extensión .less es opcional.