Preprocesador Less

Buen día Invencers el día de hoy hablaremos del último preprocesador que más desarrolladores han utilizado y el cual también permite hacer más fácil el diseño de nuestra página web, este es Less (Leaner Style Sheets) el cual es influido por Sass.
Less es un lenguaje dinámico y por lo tanto, cuenta con elementos dinámicos como variables, operaciones, funciones, mixins o anidamientos, que no se encuentran en CSS.

¿Como utilizar Less?

Tú puedes utilizar less usando el navegador que quieras para compilar las Less stylesheets con ayuda de Less.js por el lado del cliente; o instalar la aplicación de JavaScript en la computadora de desarrollo y traducirlo allí con ayuda de Less.js y del sistema de tiempo en ejecución de JavaScript NodeJS a través de la línea de comandos.

Uso del lado del Cliente

Para compilar Less en el navegador, indica primero en el documento en cuestión que deseas usar Less stylesheets (hojas de estilo con la extensión .less). Para ello, integra la extensión mediante el atributo rel = “stylesheet/less”

<link rel="stylesheet/less" type="text/css" href="styles.less"> 

Después descargaremos Less.js con el siguiente comando:

 npm install less 

y en la cabecera de nuestra página html lo mandaremos llamara. Recuerda ponerlo después de la hoja de estilo si no tendremos problemas de procesamiento

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

Uso del lado del Servidor

Less puede utilizarse de manera rápida y fácil en el lado del servidor y es mucho mejor que utilizarlo del lado del cliente pero para eso primero es necesario descargar NodeJS el cual podemos descargarlo de esta página NodeJS.org.

Después instalaremos nuestro paquete de Less en la linea de comandos con ayuda de nuestro gestor de paquetes NPM

npm install -g less

y una vez todo instalado nosotros podremos hacer un archivo con extensión .less y al finalizar con el lo cambiaremos a un archivo css con el siguiente comando:

lessc ejemplo.less ejemplo.css

Ejemplo: Variables

Archivo Less, sintaxis para el uso de variables

@color-fondo: #00AEFF; 
@color-texto:  #C100FF ;
p{
background-color: @color-fondo;
color: @color-texto;
margin: 10px;
}
ul{
background-color: @color-fondo;
}
li{
color: @color-texto;
}

El cual al convertirlo a un archivo css su sintaxis cambia a:

p{
background-color:  #00AEFF ;
color:  #C100FF ;
margin: 10px;
}
ul{
background-color: #00AEFF ;
}
li{
color: #C100FF ;
}

Con less puedes utilizar variables, anidamientos, mixins, operadores y funciones con los cuales harán más fácil el proceso de escribir nuestros estilos de nuestra página web.

Conclusión

Los preprocesadores son de mucha ayuda y realmente no importa si utilizas Sass, Stylus o Less, tú puedes utilizar el que más te guste o el que mejor se adapte a tu proyecto. Recuerda que por medio de sus páginas puedes encontrar la documentación para sacar el mayor provecho a estos preprocesadores.

Fuentes

ionox.ms

Comparte este Post
  • 2
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    2
    Shares

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *