Empezar con menos

Instalación o configuración

Less ha sido uno de los preprocesadores de CSS más populares y también se ha implementado ampliamente en numerosos marcos front-end como Bootstrap, Foundation, etc. Less Compiler es un compilador basado en JavaScript, que se puede obtener de una red de entrega de contenido. :

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

Debe agregar su documento Less antes de que se cargue el compilador de JavaScript, usando la etiqueta <link />. La hoja de estilo Less junto con el compilador se ve así:

<link rel="stylesheet/less" type="text/css" href="main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>

Nota: Por lo general, no se recomienda compilar Less en el lado del cliente (o en el navegador). Debe usarse solo para desarrollo o cuando se usan configuraciones dinámicas que hacen que no sea posible compilar del lado del servidor.

Muestra menos sintaxis

El siguiente ejemplo es un archivo Less de muestra que muestra cómo se declaran y usan las variables, cómo se definen y llaman los mixins en Less.

/* Variables */
@color-base: #87ceeb;

/* Simple mixin to set border */

.set-border(@width; @style; @color) {
  border: @width @style darken(@color, 10%);
}

/* Main CSS */
.class1 {
  background-color: @color-base;
  .set-border(1px; solid; @color-base);
  .class2 {
    background-color: #fff;
    color: @color-base;
    .set-border(1px; solid; #fff);
  }
}

El código anterior, cuando se compile, producirá el siguiente CSS: (los comentarios se eliminan por razones de brevedad)

.class1 {
  background-color: #87ceeb;
  border: 1px solid #5bbce4;
}
.class1 .class2 {
  background-color: #fff;
  color: #87ceeb;
  border: 1px solid #e6e6e6;
}

Compilar un archivo Less desde la línea de comandos

lessc [options] <source> [destination]

El comando anterior se usa para compilar archivos Less en la línea de comando. Las opciones son las diversas configuraciones que el compilador debe usar durante la compilación o después de la compilación. Las opciones incluyen -x o --compress para comprimir o minimizar el archivo CSS de salida, -sm=on o --strict-math=on para aplicar operaciones matemáticas solo en valores entre paréntesis, etc. luego viene la ruta del archivo fuente Less que debe compilarse. El destino es la ruta y el nombre del archivo de salida. Si no se proporciona, la salida se imprime en la ventana de la línea de comandos.

Considere el siguiente código Menos

/* Filename: test.less */
#demo {
 color: @color;
 background: beige;
 width: 100% / 4;
}
@color: red;

Imprimir CSS compilado en la ventana de comandos:

Cuando se ejecuta el siguiente comando en la línea de comandos, el archivo test.less se compilará y la salida se imprimirá directamente en la ventana de comandos ya que no se proporciona una ruta de destino.

lessc test.less

Producción:

#demo {
  color: red;
  background: beige;
  width: 25%;
}

Cree un archivo CSS y escriba la salida compilada en el archivo:

El mismo archivo, cuando se compila con la siguiente declaración, creará un archivo llamado test.css en la misma ruta que el archivo test.less e imprimirá/escribirá el resultado en ese archivo CSS.

lessc test.less > test.css

Crear un archivo CSS y minificarlo:

El siguiente comando imprimirá/escribirá el resultado en un archivo CSS y también lo comprimirá al final.

lessc -x test.less > test.css

Producción:

#demo{color:red;background:beige;width:25%}

Con la opción Matemática estricta habilitada:

Cuando la opción de coincidencia estricta está habilitada, el resultado será el siguiente porque los valores de “ancho” no están encerrados entre llaves.

lessc -sm=on test.less > test.css

Producción:

#demo {
  color: red;
  background: beige;
  width: 100% / 4;
}

Anidando en Menos

En Less puedes escribir reglas CSS mucho más simples y también mantenerlas bien formateadas, así que en lugar de escribir este código:

CSS

.item {
  border: 1px solid;
  padding: 4px;
}
.item .content, .item .image {
  float: left;
}
.item .content {
  font-size: 12px;
}
.item .image {
  width: 300px;
}

solo puedes escribir esto:

Menos

.item {
  border: 1px solid;
  padding: 4px;
  .content, .image {
    float: left;
  }
  .content {
    font-size: 12px;
  }
  .image {
    width: 300px;
  }
}

and Less compilará ese código en el CSS normal que todos conocemos.

Unión de archivos - Importaciones

La instrucción @import le permite insertar código CSS/Less de otro archivo en su propio archivo CSS/Less.

.foo {
  background: #900;
}
@import "my-other-css-file.css";
@import "my-other-less-file.less";