Less, el CSS variable

Less no es más que una ampliación de las hojas de estilo (CSS) que ya conocemos, pero con algunas diferencias y mas orientada al campo de la programación, ya que posee la virtud de realizar operaciones, funciones y uso de variables.

Hay que tener claro desde el principio que Less no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css pero con mejoras en el area de desarrollo.

Se vincula exactamente igual que un css, puedes importarlas a un css o vincular directamente a un documento: por ejemplo:

<link rel=”stylesheet/less” href=”style.less” type=”text/css”>

¿Cuándo utilizarlo?

Less toma ventaja cuando tenemos una plataforma web en la que necesitamos cambiar colores o variables, en un proyecto grande, si tenemos por ejemplo declarado un color como variable, simplemente cambiándolo en un lugar afectaría a toda la plataforma donde esta esa variable repetida, y sería menos engorroso realizar el cambio.

Algunas diferencias respecto a CSS:

(para definir una variable en LESS utilizamos el símbolo @)

@colorUno: #383939;
@colorDos: #66bbe3;

A partir de ahora cada vez que queramos utilizar un color solo tenemos que incluir la variable en lugar del código hexadecimal del color. ¿Más fácil de recordar no? Nuestro CSS quedaría así:

background-color: @colorUno;
color: @ colorDos;
si en un futuro decidimos cambiar los colores de nuestra web, solo tendremos que cambiar la variable de LESS y no perderemos el tiempo modificando un montón de lineas de nuestro CSS

 

Ventajas Inconvenientes
  • Utilizar variables
  • Un css unico con variables
  • Crear operaciones con JavaScript
  • Conocimientos de programación
  • Más código
  • Se tarda más tiempo en implementar

Leave a Reply

Your email address will not be published. Required fields are marked

Translate »
Twitter
LinkedIn