¿Qué es Less CSS y cómo funciona? - Guia completa en español
LessJS, es un CSS Pre-procesador ahora se ha convertido en un elemento básico en el desarrollo web. Incluye CSS sencillo con características de programación como Variables. ¿Que es LessJS y cómo Funciona?
Funciones o Mezcla y Operación que permiten a los desarrolladores web crear estilos CSS modulares, escalables y más manejables.
LessJS, ha sido uno de los procesadores de CSS más populares y también se ha implementado ampliamente en numerosos marcos front-end como también lo ha hecho Bootstrap, al momento de agregar componentes, a una página o aplicación web
Por supuesto hoy contamos con una variedad de lenguajes de programación como por ejemplo programación R que se puede instalar y ejecutar en el ordenador .
¿Que es Less y cómo Funciona?
El Compilador
Para empezar, necesitaremos configurar un compilador. La sintaxis LESS no es estándar, según la especificación W3C. El navegador no podría procesar y generar la salida, a pesar de heredar rasgos similares a CSS.
Aquí hay un vistazo al código MENOS:
@ base de color: # 2d5e8b; .class1 { background-color: @ color-base; .class2 { background-color: #fff; color: @ color-base; } }
El compilador procesará el código y convertirá la sintaxis MENOS en un formato CSS compatible con el navegador:
.class1 { background-color: # 2d5e8b; } .class1 .class2 { background-color: #fff; color: # 2d5e8b; }
El uso de JavaScript en LessJS
LessJS viene con un archivo less.js, que es un archivo JavaScript. Cree una hoja de estilo con la extensión .less y vincúlela en su documento usando el atributo rel = "hoja de estilo / menos".
<link rel = "hoja de estilo / menos" type = "text / css" href = "main.less" />
Puede obtener el archivo JS, descargarlo a través del administrador de paquetes de Bower, de lo contrario, puede vincularlo directamente a CDN.
< link rel = "hoja de estilo / menos" type = "text / css" href = "main.less" /> <script src = "// cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less .min.js "> </script>
Todos están configurados y pueden componer estilos dentro de .less. La sintaxis LessJS se compilará sobre la marcha a medida que se cargue la página.
Tenga en cuenta que el uso de JavaScript no se recomienda en la etapa de producción, ya que afectará gravemente el rendimiento del sitio web.
El uso de CLI de LessJS
LESS proporciona una interfaz de línea de comandos (CLI) nativa, lessc, que maneja varias tareas más allá de simplemente compilar la sintaxis LessJS. Usando el CLI podemos eliminar los códigos, comprimir los archivos y crear un mapa de origen. El comando se basa en Node.js que efectivamente permite que el comando funcione en Windows, OS X y Linux.
npm install -g less
Ahora tiene el comando lessc a su disposición para compilar MENOS en CSS:
lessc style.less style.css
Usar Task RunnerRunner
Taskes una herramienta que automatiza las tareas de desarrollo y los flujos de trabajo. En lugar de ejecutar el comando lessc cada vez que nos gustaría compilar nuestros códigos.
Podemos instalar un ejecutor de tareas, configurarlo para ver los cambios dentro de nuestros archivos MENOS e inmediatamente compilar MENOS en CSS.
Uso de la Aplicación Gráfica
Para aquellos que no estén acostumbrados a usar el Terminal y las líneas de comando, pueden optar por una interfaz gráfica. Hay una gran cantidad de aplicaciones para compilar MENOS hoy en día para todas las plataformas.
El Editor de Código
Puede usar cualquier editor de código. Simplemente instale un complemento o una extensión para resaltar la sintaxis MENOS con los colores adecuados.
Una función que ahora está disponible para casi todos los editores de código e IDE, incluidos SublimeText, Notepad ++, VisualStudio, TextMate y Eclipse, entre otros.
Sintaxis de LessJS
A diferencia del CSS normal, tal como lo conocemos, LessJS funciona mucho más como un lenguaje de programación. Es dinámico, así que espere encontrar algunas terminologías como Variables, Operación y Alcance en el camino.
Variables
Echaremos un vistazo a las Variables. Si ha estado trabajando bastante tiempo con CSS, probablemente haya escrito, donde tenemos valores repetitivos asignados en bloques de declaración en toda la hoja de estilos.
.class1 { background-color: # 2d5e8b; } .class2 { background-color: #fff; color: # 2d5e8b; } .class3 { border: 1px solid # 2d5e8b; }
Esta práctica es realmente buena, hasta que nos vemos obligados a examinar más de mil o más fragmentos similares a lo largo de la hoja de estilo.
Esto podría suceder cuando se construye un sitio web a gran escala. El trabajo será tedioso, si no estamos usando un preprocesador de CSS como LessJS.
La instancia anterior no sería un problema, podemos usar Variables. Las variables nos permitirán almacenar un valor constante que luego se puede reutilizar en toda la hoja de estilos.
@ base de color: # 2d5e8b; .class1 { background-color: @ color-base; } .class2 { background-color: #fff; color: @ color-base; } .class3 { border: 1px solid @ color-base; }
En el ejemplo anterior, almacenamos el color # 2d5e8b en la variable @ color-base. Cuando desee cambiar el color, solo necesitamos cambiar el valor en esta variable.
Aparte del color, también puede poner otros valores en las variables como por ejemplo:
@ font-family: Georgia @ dot-border: dotted @transition: linear @opacity: 0.5