Las variables se utilizan para definir aquellos valores que utilizamos de forma común en un único lugar, por regla general se definen en un sólo lugar, pero pueden ser sobre-escritas en cualquier parte de nuestro código, es decir podemos redefinirlas  después. Por su parte los comentarios se utilizan para mantener el código claro y legible a los demás desarrolladores. En el siguiente artículo comentaremos como se trabajan en Less.

 

Comentarios

En Less podemos añadir nuestros comentarios de la misma forma que lo hiciéramos en código CSS, es decir entre  /* y */.  Less también permite comentarios de una línea que comiencen con //.  Una de las ventajas de nuestros comentarios es que sólo aquellos marcados como comentarios de múltiples líneas ( Truly Comments) son los que se incluirán cuando el script CSS resultante sea minificado. Veamos algunos ejemplos:

1
2
3
4
5
/* comentario por oscar
.mixins() { ~"Este mixin se ha comentado"; }
*/


// .class_comentada

Si bien Less, como PHP o Javascript no permite los comentarios anidados, podemos realizar una mezcla entre los multi-linea y los de única línea de la siguiente forma

1
2
3
/*
//comentario mezclado
*/

Una característica particular de Less son los llamados comentarios especiales o importantes, (Mediante la utilización del plugin clean-css) una nota legal sobre la licencia que incluimos en la salida minificada es un buen ejemplo de un comentario de este tipo. Podemos utilizar la sintaxis que a continuación te definimos para escribir notas de copyright al inicio de nuestra hoja de estilos:

1
2
3
/*!
Aviso Legal!
!*/

 

Variables

Las variables en Less nos ayudan a mantener los archivos organizados y fáciles de mantener. Ellos nos permiten definir valores ampliamente utilizados en un único lugar para permitirnos  reutilizarlos en todo el código Less. Las variables comienzan con @ y un nombre, por ejemplo @color, @size, @nodos, para los nombres de las variables ser permiten caracteres alfanuméricos, underscore (_) y dashes (-), lo que por ejemplo podemos tener @un-nombre-de-variable-con-39-caracteres.

Podemos otorgar un valor a la variable ( una declaración) que puede contener números, valores en pixels, Strings, listas e incluso rulesets. La asignación se realiza mediante los 2 puntos (:) y termina con punto y coma (;). Veamos algunos ejemplos:

1
2
3
4
5
@width: 100px;
@color: green;
@lista: a b c d;
@otra-lista: a, b, c, d;
@valor-escape: ~"dark@{color}";

Como has visto, una vez que has declarado una variable, podrás usarla en cualquier parte del código. Así, los cambios los realizas sólo una vez. Una buena práctica al trabajar con variables es declararlas en un fichero aparte (por ejemplo variables.less) e importarlo a tu script principal.

1
@import "less/variables.less";

 

Nombrando tus variables

Como regla general las variables deben tener un nombre descriptivo sobre el valor que está almacenando. Variables con nombre @a1, @b2 o @var1 serán compiladas pero no son una muy buena elección. Cuando el número de variables crece o cuando se hace necesario el cambio de algo en el código no es buena idea utilizar nombres que nada tendrán que ver con la funcionalidad, por ello recomendamos nombres asociados al contexto de las reglas CSS sobre las cuales trabajaremos. Buenos ejemplos de nombres de variables incluyen @nav-tabs-active-link-hover-border-color o  @dark-color.

Como regla general, se deben utilizar nombre en minúscula y cuando son 2 o más palabras estas deben separarse por el guión.

Estas son convenciones y no reglas estrictas, por lo que variables del tipo CameCase son aceptadas

Algo que debemos tener muy en cuenta cuando definimos nombres de variables compuestas y separadas por guión, es que cuando Less realiza cálculos matemáticos puede originar problemas, por lo que debemos añadir un espacio extra para solucionarlo, veamos un ejemplo:

1
2
3
@valor-1 // se leerá como una única variable en lugar de

@valor  -1

 

 

La última declaración gana

Al declarar nuestras variables debemos tener en cuenta que el último valor asignado a la variable será la que se considere cuando el código se compile. Veamos un ejemplo:

1
2
3
4
5
@valor: 15;
.Miclase{
property: @valor;
}
@valor: 20;

Se compilará como

1
2
3
.Miclase{
property: 20;
}

Pero atención, la última declaración que gana sòlo afectará la declaración definida en el mismo scope. En Less, los mixins pueden tener su propio scope, de forma similar a las funciones y clases, veamos un ejemplo:

1
2
3
4
5
6
7
8
9
@valor: 10;
.mixin(){
@valor: 30;
property: @valor;
}
.clase{
.mixin;
}
@valor: 20;

Se compilará como

1
2
3
.clase{
property: 30;
}

 

Te Puede Interesar

Less, un lenguaje dinámico para las CSS

(Visited 39 times, 1 visits today)