Cómo usar lessc para compilar archivos .less
LESS toma CSS y le otorga las características de un lenguaje dinámico, como variables, herencia, operaciones y funciones. LESS puede ejecutarse en el lado del cliente (IE 6, Webkit, Firefox) o en el lado del servidor a través de Node.js o Rhino.
Antes de presentar cómo usar lessc (compilador de código fuente menos) para escribir un archivo .less para generar un archivo .css, es muy necesario comprender Node.JS.
1. Primera introducción a Node.js
Node.js no es una aplicación JS, sino una plataforma de ejecución JS que es responsable de ejecutar el código Javascript del lado del servidor. . De hecho, Node.js está escrito en C y es un entorno de ejecución de Javascript.
Node.js utiliza el motor V8 del navegador Google Chrome, que funciona muy bien y también proporciona muchas API a nivel de sistema, como operaciones de archivos, programación de redes, etc.
Para obtener más información sobre Node.JS, consulte los dos primeros artículos de "Node.js de forma sencilla"
1).Profundidad de Node.js (1): Qué es Node.js
2).Node.js (2): Instalación y configuración de NPM (PD: al instalar la última versión de Node.JS, ya viene con NPM por defecto) , no es necesario instalarlo a través de GitHub)
Node.JS en mi máquina está instalado de forma predeterminada en el directorio D:\nodejs\, como se muestra en la figura
Iniciar nodo. js y marque la Versión
Dos: Instale el paquete de software LESS
Instale el paquete de software LESS mediante el comando npm install -d less.
Para instalar el paquete less en el directorio node_modules de nodejs, primero puede ingresar el disco d: y usar este comando
Después de instalar el paquete LESS, ingrese D:\nodejs\ node_modules\, hay tres directorios en este directorio, a saber, less, npm y .bin (este directorio contiene el compilador lessc. Agregue D:\nodejs\node_modules\.bin a la variable de entorno).
Tres: escriba el archivo .less y compílelo
Este es un código de prueba simple test.less, el contenido es el siguiente
Copia el código
@color: #4D926F;
#header {
color:@color;
}
h2 {
color:@color;
}
Copiar código
El archivo se encuentra en E:\Code\VS2013\BootstrapDemo \LessDemo\Less\test. less.
Inicie la consola node.js y vaya al directorio donde se encuentra el archivo test.less. Luego ingrese el comando lessc test.less gt; test.css, el archivo less se compilará en un archivo css
Abra el archivo test.css generado
.