Less es un lenguaje de preprocesamiento de CSS que amplía el lenguaje CSS, añadiendo características como variables, mixins, funciones, etc., lo que hace que CSS sea más fácil de mantener, facilita la creación de temas y su ampliación.

Less puede ejecutarse en las plataformas Node, navegador y Rhino. En la web hay muchas herramientas de terceros que ayudan a compilar el código fuente de Less.

Ejemplo:

@base: #F938AB;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Resultado de la compilación

.box {
  color: #FE33AC;
  border-color: #FDCDEA;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Less puede ejecutarse en la línea de comandos mediante npm; descargarse como archivo de script en el navegador; o integrarse en numerosas herramientas de terceros. ConsulteUso 。

Instalación

La forma más fácil de instalar en el lado del servidor es mediante npm (node.jsel gestor de paquetes), de la siguiente manera:

$ npm install -g less

Uso de la línea de comandos:

Después de instalar Less, se puede invocar el compilador de Less desde la línea de comandos, de la siguiente manera:

$ lessc styles.less

Esto generará el código CSS compilado enstdout, puedes redirigir la salida a un archivo:

$ lessc styles.less > styles.css

Si deseas generar CSS comprimido, solo agrega-xopción. Si deseas obtener una mejor compresión, también puedes usar--clean-cssOpción habilitadaClean CSSRealizar la compresión.

Ejecutar lessc sin ningún argumento mostrará en la línea de comandos la lista de todas las opciones disponibles.

Uso en el código

Puedes invocar el compilador de Less en tu código de la siguiente manera (plataforma Node).

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

El resultado de salida es:

.class {
  width: 2;
}

También puedes invocar manualmente el analizador (parser) y el compilador:

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});

Configuración

Se pueden pasar múltiples parámetros al compilador:

var parser = new(less.Parser)({
  paths: ['.', './lib'], // Specify search paths for @import directives
  filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});

Herramientas de terceros

VerUsoConsulta la información detallada sobre herramientas de terceros.

Línea de comandos de Rhino

Cada versión de less.js también incluye una versión compatible con Rhino.

La versión Rhino de la línea de comandos requiere incluir los siguientes dos archivos:

• less-rhino-.js - compilar y ejecutar,
• lessc-rhino-.js - soporte de línea de comandos

Ejecutar la compilación desde la línea de comandos:

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

Lo anterior compilará el archivo styles.less y lo guardará como styles.css. El parámetro del archivo de salida es opcional; si no se especifica, less enviará la salida por defecto a la salida estándar (stdout）。

Uso en el cliente

Ejecutar less.js en el navegador es muy cómodo para el desarrollo, pero no se recomienda para entornos de producción.

Usar Less.js en el cliente es la forma más fácil y resulta muy conveniente durante el desarrollo, pero en entornos de producción el rendimiento y la fiabilidad son muy importantes,recomendamos utilizar mejor node.js u otras herramientas de terceros para el precompilado.。

Entonces, comencemos. Añada en la página.lessel enlace de la hoja de estilo, yrelEl atributo se establece en "stylesheet/less"：

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

A continuación, descargueless.jsy mediante<script></script>la etiqueta para introducirlo, colocado en la página<head>Dentro del elemento:

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

Consejos

• Asegúrate de cargar tus hojas de estilo antes de less.js.
• Si se cargan varios.lessLos archivos de hojas de estilo se compilan individualmente. Por lo tanto, cualquier variable, mixin o espacio de nombres definido en un archivo no puede ser accedido desde otros archivos.

Opciones del navegador

En<script src="less.js"></script>antes de definir el globallessel objeto puede serLess.jsEstablecer parámetros:

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

Más informaciónOpciones del navegador

Descarga para el navegador

bower install less

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>

Less.js se publica bajo la licencia Apache 2 (Tenemos la intención de adoptar un modelo de doble licencia en el futuro.). Copyright 2009-2014, Alexis Sellier y el equipo principal de Less (ver arriba). Resumen a continuación:

La información completa de los derechos de autor de Less.js se encuentra enDentro del repositorio del proyecto, por favor consulte.