Saltar al contenido

¿Qué es Less CSS y Cómo Funciona?

10 junio, 2019

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.

En esta publicación, vamos a analizar LessJS, que ha sido uno de los procesadores de CSS más populares y también se ha implementado ampliamente en numerosos marcos front-end como Bootstrap.

También recorreremos las utilidades básicas, herramientas y configuraciones para ayudarlo a comenzar a funcionar con MENOS.

¿Que es LessJS 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

LessJS viene con un archivo less.js que es realmente fácil de implementar en su sitio web. 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 aquí, 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, algunas gratuitas y otras de pago.

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

Hecharemos un vistazo a las Variables. Si ha estado trabajando bastante tiempo con CSS, probablemente haya escrito algo como esto, 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
¿Nos das 5 estrellas? ?