En este artículo, discutiremos cómo precompilar el archivo LESS en un archivo CSS y comprenderemos su implementación a través del ejemplo.
Introducción: LESS es un preprocesador CSS simple que permite crear hojas de estilo manejables, personalizables y reutilizables para sitios web. LESS es una extensión de lenguaje compatible con versiones anteriores para CSS junto con características dinámicas de lenguaje de hoja de estilo que aumentan el poder de trabajo de CSS. Permite el uso de variables y proporciona la funcionalidad de un lenguaje de programación. Pero si queremos precompilar LESS en CSS antes de usarlo en una página web, podemos hacerlo usando el paquete LESS del administrador de paquetes npm. De esta manera, podemos usar menos en una página web HTML simple.
Configurando el LESS para precompilarlo en CSS: Podemos instalar la última versión del paquete LESS desde npm usando el siguiente comando. Antes de ejecutar el siguiente comando, node.js debe estar instalado en el sistema. Consulte el artículo Node.js NPM (Node Package Manager) para obtener un proceso de instalación detallado. Ahora, ejecute el siguiente comando para instalar el compilador LESS globalmente.
Sintaxis:
npm install less -g
Nota: Ejecute el símbolo del sistema como administrador, si hay problemas en el proceso de instalación debido a un problema de permisos.
Precompilación de LESS en CSS: para compilar LESS en CSS, usamos el siguiente comando en un símbolo del sistema. El comando lessc nos permite precompilar nuestro archivo LESS en un archivo CSS básico. Esto nos ayuda a escribir código modular utilizando programación LESS y seguir obteniendo todos los beneficios de CSS al compilarlo en CSS rápido tradicional.
Sintaxis:
lessc <source> [destination]
dónde,
- <fuente>: El nombre completo del archivo LESS con la dirección del directorio de trabajo actual.
- [destino]: el nombre completo del archivo CSS deseado con la dirección del directorio de trabajo actual.
Ejemplo 1: si tenemos un archivo style.less en el directorio de trabajo actual y queremos compilarlo en un archivo CSS como style.css en el mismo directorio. usamos el siguiente comando:
lessc style.less style.css
Este comando convierte el archivo LESS style.less en un archivo CSS style.css .
Archivo MENOS:
.container {
.base-container {
font-size: 24px;
}
.base2-container {
font-size: 48px;
}
}
Archivo CSS:
.container .base-container {
font-size: 24px;
}
.container .base2-container {
font-size: 48px;
}
Producción:
Producción
Ejemplo 2: si tenemos un archivo style.less en el otro directorio (en este caso, está en «D:\Geeksforgeeks»), en lugar del directorio actual y queremos compilarlo en un archivo CSS como style.css en el mismo directorio. usamos el siguiente comando:
lessc D:\Geeksforgeeks\style.less D:\Geeksforgeeks\style.css
Este comando convierte el archivo LESS style.less en un archivo CSS style.css .
Archivo MENOS:
@primary-color: #0000ff;
@padding: 4px;
.container {
.base-container {
font-size: 24px;
padding-right: round(@padding);
color: @primary-color;
}
.base2-container {
font-size: 48px;
padding-right: round(@padding);
color: @primary-color;
}
}
Archivo CSS:
.container .base-container {
font-size: 24px;
padding-right: 4px;
color: #0000ff;
}
.container .base2-container {
font-size: 48px;
padding-right: 4px;
color: #0000ff;
}
Producción:
Producción
Ejemplo : en este ejemplo, hemos utilizado el código CSS generado anteriormente que se compila previamente desde LESS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>LESS Tutorial</title>
<style>
.container .base-container {
font-size: 24px;
padding-right: 4px;
color: #0000ff;
}
.container .base2-container {
font-size: 48px;
padding-right: 4px;
color: #0000ff;
}
</style>
</head>
<body>
<div class="container">
<div class="base2-container">
Welcome to GeeksforGeeks
</div>
<p class="base-container">
A Computer Science portal for geeks.
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA