Less

Nueva pgina
Fijate que esta pgina no est actualizada y pronto ser reemplazada por nuestra nueva pgina,
que actualmente se encuentra en less.github.io. Por favor visita esta pgina para consultar toda la
informacin actualizada y considera leer la seccin de cambios de esta pgina y el registro de
cambios.
Variables
Las variables permiten especificar valores que van a ser utilizados en un nico lugar, y adems
poder reusarlas en otras partes de la hoja de estilo, pudiendo realizar cambios globales
modificando una nica lnea de cdigo.
// LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
/* CSS compilado */
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
Mixins
Los mixins permiten incluir todas las propiedades de una clase en otra diferente aadiendo
simplemente el nombre de la clase como una propiedad ms. El comportamiento es similar al de
las variables pero con clases enteras. Los mixins pueden comportarse tambien como fuciones, y
tomar argumentos, como se ve en el siguiente ejemplo.
// LESS
/* CSS compilado */
.rounded-corners (@radius: 5px) { #header {

-webkit-border-radius: @radius;
-webkit-border-radius: 5px;
-moz-border-radius: @radius;
-moz-border-radius: 5px;
-ms-border-radius: @radius;
-ms-border-radius: 5px;
-o-border-radius: @radius;
-o-border-radius: 5px;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Reglas internas
En vez de escribir selectores con nombres largos para especificar una relacin de herencia, en
Less puedes anidar selectores dentro de otros. sto hace la herencia ms clara y reducir el
tamao de la hoja de estilo.
// LESS
/* CSS compilado */
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
Funciones & Operaciones

Existe dependencia entre elementos de tu hoja de estilo? Las operaciones te permiten sumar,
restar, multiplicar y dividir los valores de las propiedades y colores, dndote el poder de crear
relaciones complejas entre propiedades. Las operaciones deberan estar definidas entre parntesis
para asegurar la compatibilidad con CSS. Las funciones se corresponde a funciones JavaScript,
permitindote modificar valores como quieras.
// LESS
/* CSS compilado */
@the-border: 1px;
@base-color: #111;
@red:
#842210;
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
Uso del lado del cliente

La manera ms fcil de usar LESS es del lado del cliente. En produccin y especialmente si el
rendimiento es importante, se recomienda pre-compilar el cdigo usando node o alguna otra
herramienta.
Enlaza tu hoja de estilo .less con el atributo rel especificando el valor stylesheet/less:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
A continuacin descarga el fichero less.js desde el enlace situado al inicio de la pgina, e
inclyelo en el elemento <head> de tu pgina, tal que as:
<script src="less.js" type="text/javascript"></script>
Asegrate de incluir tus hojas de estilo antes del script.
Puedes seleccionar opciones usando un objeto global LESS antes del script. Por ejemplo:
<script type="text/javascript">
less = {
env: "development", // o "production"
async: false,
asncrona
// carga las importaciones de manera
fileAsync: false,
asncrona cuando
// carga las importaciones de manera

// una pgina usa un protocolo de
archivos
poll: 1000,
guarda, tiempo en ms
// cuando est activado el modo

// entra consultas
functions: {},
especificadas por nombre
// funciones del usuario,
dumpLineNumbers: "comments", // o "mediaQuery" o "all"

relativeUrls: false,// ajusta las urls para que sean
relativas si false,
// las urls se considerarn relativas
respecto al
// fichero less de entrada
rootpath: ":/a.com/"// una ruta para aadir al comienzo
de cada una de las
// urls
};
</script>
<script src="less.js" type="text/javascript"></script>
Modo guarda
El modo guarda es una caracterstica del lado del cliente que habilita la actualizacin automtica
de tus estilos cuando son modificados.
Para habilitarlo, aade #!watch a la URL del navegador y luego recarga la pgina. O bien,
puedes ejecutar la funcin less.watch() desde la consola.
Modificar variables
modifyVars habilita la modificacin de variables LESS en tiempo de ejecucin. Cuando se
ejecuta indicando nuevos valores, el fichero LESS es recompilado sin tener que recargar la
pgina. Un ejemplo simple sera el siguiente:
less.modifyVars({
'@buttonFace': '#5B83AD',
'@buttonText': '#D9EEF2'
});
Depurando
Es posible obtener el cdigo CSS de salida que permite localizar el origen de una regla.
Tanto si especificas la opcin dumpLineNumbers como hemos visto anteriormente, como si
aades!dumpLineNumbers:mediaQuery en la url.
Puedes usar la opcin comments junto con FireLESS y la opcin mediaQuery junto con
FireBug y las herramientas de desarrollo de Chrome (similar a la depuracin de media queries en
SCSS).
Uso del lado del servidor

Instalacin
La manera ms facil de instalar LESS en un servidor, es via npm, el gestor de paquetes de node,
tal que as:
$ npm install -g less
Uso de la lnea de comando

Una vez instalado, puedes llamar al compilador desde la lnea de comando de la siguiente
manera:
$ lessc styles.less
Producir la salidad del cdigo CSS compilado en stdout, puedes redirigir esta salida a
cualquier fichero que desees:

$ lessc styles.less > styles.css
Para obtener el cdigo CSS comprimido, simplemente utiliza la opcin -x. Tambien puedes usar
la herramienta YUI CSS Compressor con la opcin --yui-compress.
Para consultar todas las opciones de la lnea de comando ejecuta el comando lessc sin ningn
parmetro.
Uso en el cdigo
Puedes invocar al compilador desde node de la siguiente manera:
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, css) {

console.log(css);
});
el resultado ser
.class {
width: 2;
}
tambin puedes invocar manualmente al parser y al 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());
});
Configuracin
Puedes modificar algunos parmetros del compilador:
var parser = new(less.Parser)({
paths: ['.', './lib'], // Especifica las rutas de bsqueda
para las directivas @import
filename: 'style.less' // Especifica un fichero, para bien
mensajes de errores
});
parser.parse('.class { width: (1 + 1) }', function (e, tree) {

tree.toCSS({ compress: true }); // Minify CSS output
});
Otras herramientas
Existe una seleccin de herramientas disponibles que puedes usar en tu entorno local y todas
estn documentado en la wiki de Github.
Herramientas de lnea de comando
Herramientas de interfaz grfico
El lenguaje
Al ser una extensin de CSS, LESS no es solo retrocompatible con CSS, sino que proporciona
caractersticas extras usando sintaxis CSS. sto hace que aprender LESS sea muy sencillo, y si
tienes dudas, siempre podrs recurrir a CSS.
Variables
Se explican por si solas:
@nice-blue: #5B83AD;
@light-blue: (@nice-blue + #111);
#header { color: @light-blue; }
Salida:
#header { color: #6c94be; }
Tambin se les puede asignar un nombre:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
Cuya salida ser:

content: "I am fnord.";
Cuando definimos una variable dos veces, se usar la ltima definicin de la variable, buscando
desde el mbito actual hacia arriba. Similar a lo que ocurre en CSS donde la ltima propiedad
dentro de una definicin es la que determina el valor.
Por ejemplo:
@var: 0;
.class1 {
@var: 1;
.class {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
El resultado ser:
.class1 .class {
three: 3;
}
.class1 {
one: 1;
}
Las variables son inicializadas de manera diferida y no tienen que ser declaradas antes de usarse.
El siguiente cdigo es vlido:
lazy-eval {
width: @var;
}
@var: @a;
@a: 9%;
tambin es vlido el siguiente:

.lazy-eval-scope {
width: @var;
@a: 9%;
}
@var: @a;
@a: 100%;
ambos obtienen la misma salida:
.lazy-eval-scope {
width: 9%;
}
Mixins
En LESS, es posible incluir un conjunto de reglas de un selector en otro. De esta manera,
definimos el siguiente selector:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
Si queremos incluir las reglas de este selector en otro tendremos que incluir el nombre del
selector dentro del otro selector en el que queremos incluir las reglas, tal que:
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
Las reglas del selector .bordered aparecen ahora en ambos #menu a y .post a:
#menu a {
color: #111;
}
.post a {
color: red;
}
Cualquier selector de clase o id puede ser incluido dentro de otro de cualquier manera.
Nota: Las variables tambien puede ser incluidas, de esta manera las variables de un mixin sern
incluidas en el mbito actual. Este comportamiento puede ser modificado en el futuro.
Mixins Paramtricos
LESS tiene un tipo especial de selector que puede ser mezclado como si fuera una regla,
pudiendo adems aceptar parmetros. A continuacin un ejemplo sencillo:
.border-radius (@radius) {
}
Y aqu vemos como podemos usarla en varios selectores con diferentes parmetros:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
Se pueden definir valores por defecto para los parmetros de los mixins paramtricos:
.border-radius (@radius: 5px) {
}
Ahora podemos llamarlos de la siguiente manera:

#header {
.border-radius;
}
De esta manera incluiremos la propiedad border-radius con un valor de 5px.

Adems, podemos definir mixins paramtricos a los que no se les pase ningn parmetro. Es til
si quieres ocultar el selector en el CSS generado, pero no sus propiedades en otros selectores:
.wrap () {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
La salida generada ser:

pre {
text-wrap: wrap;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}
Mixins Con Mltiples Parmetros

Los parmetros pueden ir separados por punto y coma o coma. Se recomienda el uso del punto y
coma. La coma tiene un doble significado: puede ser interpretado como el separador de los
parmetros de un mixin o el separador de los elementos de una lista css.
Usar la coma como separador del mixin impedira usar una lista separada por comas como un
argumento. Por otra parte, cuando el compilador ve al menos un punto y coma dentro de la
llamada del mixin, asume que los argumentos estarn separados por punto y coma y todas la
comas pertenecen a listas css:
o dos argumentos y cada uno contienen una lista separadas por comas: .name(1, 2, 3;
something, else),
o tres argumentos y cada uno contiene un nmero: .name(1, 2, 3),
o usar un punto y coma intil para crear una llamada al mixin con un argumento que
contiene una lista deparada por comas: .name(1, 2, 3;),
o valor por defecto separado por comas: .name(@param1: red, blue;).
Es legal definir mltiples mixins con el mismo nombre y el mismo nmero de parmetros. Less
usar las reglas de todos los mixins que puedan aplicarse. Si usas el mixin con un solo
parmetro, por ejemplo .mixin(green);, sern seleccionadas las reglas de todos los mixins que
tengan exactamente un parmetro obligatorio, es decir, no tengn un valor por defecto definido:
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
la salida ser:
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
La variable @arguments
La variable @arguments tiene un significado especial dentro de los mixins, contiene todos los
argumentos que se les pasa cuando el mixin fue invocado. Es til si no quieres trabajar con
parmetros de manera individual:
.box-shadow (@x: 0; @y: 0; @blur: 1px; @color: #000) {
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
.box-shadow(2px; 5px);
Cuyo resultado es:
-moz-box-shadow: 2px 5px 1px #000;

-webkit-box-shadow: 2px 5px 1px #000;
box-shadow: 2px 5px 1px #000;
Argumentos adelantados y la variable@rest

Puedes usar ... si quieres que el mixin tenga un nmero variable de argumentos. Usndolo
despus del nombre de una variable, se incluir la variable a estos argumentos.
.mixin (...) {
// acepta 0-N argumentos
.mixin () {
// acepta exctamente 0 argumentos
.mixin (@a: 1) {
// acepta entre 0-1 argumentos
.mixin (@a: 1; ...) { // acepta entre 0-N argumentos

.mixin (@a; ...) {
Adems:
// acepta entre 1-N argumentos
.mixin (@a; @rest...) {

// @rest hace referencia a los argumentos definidos despus de
@a
// @arguments hace referencia a todos los argumentos
}
Valores de retorno
Las variables definidas dentro de mixins actuan como valores de retorno y pueden ser llamadas.
Las variables devueltas nunca sobrescribiran el valor de una variable local. Solo se copiaran las
variables que no existen en ell mbito local donde se realiza la llamada.
A continuacin un ejemplo:
.mixin() {
@global: in-mixin;
@local: in-mixin;
@definedOnlyInMixin: in-mixin;
}
.class {
@local: localy-defined-value; //local variable - protegida (no se
sobrescribe)
margin: @global @local @definedOnlyInMixin;
.mixin();
}
@global: outer-scope; // non-local variable - sobrescrita
Se obtiene:
.class {
margin: in-mixin localy-defined-value in-mixin;
}
Desbloqueando Mixins
Los mixins definidos dentro de otros mixins tambin puedes ser llamados. En esta ocasin, no
existir proteccin dentro del mbito local, es decir, que los mixins desbloqueados sobrescribirn
cualquier otro mixin que tenga el mismo nombre dentro del mbito local.
.unlock(@value) { // mixin externo
.doSomething() { // mixin interno
declaration: @value;
}
}
.selector {
.unlock(5); // desbloquea el mixin doSomething - realizado en
primer lugar
.doSomething(); //se copi el mixin interno y es usado
}
Se obtiene:
.selector {
declaration: 5;
Los mixins desbloqueados estarn disponibles despus de que hayan sido desbloqueados. En el
siguiente ejemplo se lanzara un error sintctico:
.doSomething(); // error sintctico: mixin interno no est todava
disponible
.unlock(5); // demasiado tarde
La Palabra Clave !important

Puedes usar la palabra clave !important despus de la llamada de un mixin para marcar todas sus
reglas como importantes:
Ejemplo de entrada:
.mixin (@a: 0) {
border: @a;
boxer: @a;
}
.unimportant {
.mixin(1);
}
.important {
.mixin(2) !important;
}
generar:
.unimportant {
border: 1;
boxer: 1;
}
.important {
border: 2 !important;
boxer: 2 !important;
}
Patrones y expresiones condicionadas

Algunas veces, puedes querer cambiar el comportamiento de un mixin basndote en los
parmetros que le pasas. Vamos a ver un ejemplo sencillo:
.mixin (@s; @color) { ... }
.class {
.mixin(@switch; #888);
}
Ahora supongamos que queremos que .mixin se comporte de una manera determinada
dependiendo del valor de la variable @switch, podramos definir .mixin de la siguiente manera:
.mixin (dark; @color) {
color: darken(@color, 10%);
}
.mixin (light; @color) {
color: lighten(@color, 10%);

}
.mixin (@_; @color) {
display: block;
}
Si ejecutamos a continuacin:
@switch: light;
.class {
.mixin(@switch; #888);
}
Obtendremos la siguiente salida:

.class {
color: #a2a2a2;
display: block;
}
Como podemos ver, el color que se le pasa a .mixin fue iluminado. Si el valor
de @switch fuese dark, el resultado sera un color ms oscuro.
Lo que ha pasado ha sido lo siguiente:
o La primera definicin del mixin no es invocada porque espera el valor dark como primer
argumento.
o La segunda definicin es invocada, ya que espera el valor light.
o La tercera definicin tambin es invocada porque espera cualquier valor.
Solo se invocan los mixins cuya definicin encaja con los parmetros pasados. Las variables
encajan y se vinculan a cualquier valor. Una variable solo puede encajar con un valor igual a si
mismo.
Tambien puede usarse la aridad, por ejemplo:
.mixin (@a) {
color: @a;
}
.mixin (@a; @b) {
color: fade(@a; @b);
}
Si llamamos a .mixin con un nico argumento, obtendremos la salida obtenida con la primera
definicin, mientras que si lo llamamos con dos argumentos, obtendremos la segunda definicin,
en concreto @a se desteir un @b.
Expresiones condicionadas
Las expresiones condicionadas se usan cuando quieres invocar un mixins cuando cumple una
condicin determinada, en vez del valor de algn parmetro o la aridad. Si ests familiarizado
con la programacin funcional, ya conocers como funcionan.
Para no alejarse de la naturaleza declarativa de CSS, LESS opta por implementar las ejecuciones
condicionales usando mixins condicionados en vez de sentencias if/else, al igual que ocure con la
opcin @media.
Vamos a ver un ejemplo:
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
La palabra clave when precede la condicin (en esta ocasin una sola). Si ejecutamos el cdigo
siguiente:
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
Obtenemos la siguiente salida:

.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
La lista completa de operadores lgicos que se pueden usar son: > >= = =< <. Adems, se
puede usar la palabra clave true, haciendo los siguientes dos mixins equivalentes:
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
Cualquier otro valor que no sea true ser falso:
.class {
.truth(40); // No invocar a ninguna de las definiciones
anteriores
}
Podemos separar varias condiciones por comas ,si cualquier condicin es evaluada como
true, se considerar toda condicin como verdadera:
.mixin (@a) when (@a > 10), (@a < -10) { ... }
Se pueden comparar argumentos entre s o con otras variables:

@media: mobile;
.mixin (@a) when (@media = mobile) { ... }

.mixin (@a) when (@media = desktop) { ... }
.max (@a; @b) when (@a > @b) { width: @a }

.max (@a; @b) when (@a < @b) { width: @b }
Por ltimo, si se quiere conocer el tipo de algn valor, se pueden usar las funciones is*:
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }
Estn son las funciones que comprueban los tipos bsicos:

o iscolor
o isnumber
o isstring
o iskeyword
o isurl
Si se quiere comprobar si algn valor, adems de ser un nmero, est definido en una unidad
especfica, se hace uso de una de las siguientes funciones:
o ispixel
o ispercentage
o isem
o isunit
Por ltimo pero no menos importante, se puede usar la palabra clave and para definir
coindiciones adicionales:
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
Y la palabra clave not para negar condiciones:

.mixin (@b) when not (@b > 0) { ... }
Reglas anidadas
LESS te permite anidar en vez de usar la cascada, aunque tambin es posible combinar ambos
mecanismos. Supongamos que tenemos la siguiente hoja CSS:
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
En LESS, se puede escribir de la siguiente forma:

#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
O de esta otra:
#header
{ color: black;
.navigation
{ font-size: 12px }
.logo
{ width: 300px;
&:hover
}
{ text-decoration: none }
Es resultado es un cdigo ms conciso e imita mejor la estructura de tu rbol DOM.

Ntese que el combiandor & es usado cuando se quiere que un selector anidado sea concatenado
con el selector padre, en vez de actuar de una manera descendente. Es especialmente importante
para las pseudoclases como :hover y :focus.
Por ejemplo:
.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}
Se obtiene
.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}
Media Queries anidadas
Las media queries pueden ser anidadas de la misma forma que los selectores, por ejemplo
.one {
@media (width: 400px) {
font-size: 1.2em;
@media print and color {
color: blue;
}
}
}
Se obtiene
@media (width: 400px) {
.one {
font-size: 1.2em;
}
}
@media (width: 400px) and print and color {
.one {
color: blue;
}
}
Uso anticipado de &

El simbolo & puede ser usado en selectores para invertir el orden del anidamiento y multiplicar
las clases.
Por ejemplo:
.child, .sibling {
.parent & {
color: black;
}
& + & {
color: red;
}
}
Obtendremos
.parent .child,
.parent .sibling {
color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
color: red;
}
Tambin puedes usar & en mixins para referenciar un anidamiento que est fuera de la definicin
del mixin.
Herencia
A partir de la versin 1.4, LESS permite heredar un estilo. Se podra decir que la herencia es el
mecanismo opuesto a un mixin. En vez de aadir todas las propiedades de una clase en otra, se
usa el selector extend indicando una lista de todas las clases que se van a extender.
La sintaxis para heredar se ha diseado como una pseudo-clase CSS, y puede ser combinada con
pseudo-clases siempre y cuando cualquier selector de herencia aparezca en ltimo lugar.
Por ejemplo:
div {
background-color: #e0e0e0;
}
p:extend(div) {
color: #101010;
}
Obtendremos la siguiente salida:

div,
p{
background-color: #e0e0e0;
}
p{
color: #101010;
}
Como puedes ver, puede reducirse significativamente el cdigo CSS generado en comparacin
con el uso de mixins.
El selector extend puede usarse en la misma lnea en la que se defina el selector de la clase, o
puede ser anidado como en el ejemplo siguiente:
.parent {
font-size:12pt;
}
.child {
&:extend(.parent);
}
Por defecto, extend no incluye elementos anidados de los estilos heredados. Para conseguirlo,
debes aadirall al selector en la expresin extend.
Por ejemplo:
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement :extend(.test) {
}
Salida:
.a.b.test,
.test.c {
color: orange;
}
.test:hover {
color: green;
}
Pero esto:
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement :extend(.test all) {
}
Outputs:
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
Operaciones
Se puede operar sobre cualquier nmero, color o variable. Las operaciones deberan estar
definidas entre parntesis. A continuacin un par de ejemplos:
@base: 5%;
@filler: (@base * 2);
@other: (@base + @filler);
color: (#888 / 4);

background-color: (@base-color + #111);
height: (100% / 2 + @filler);
La salida es mucho ms simple de lo que cabe esperarLESS entiende la diferencia entre

colores y unidades. Si una unidad es usada en una operacin, como por ejemplo aqu:
@var: (1px + 5);
LESS usar esa unidad en el resultado final6px en este caso.

Tambin se permite el uso anidado de parntesis en las operaciones:
width: ((@var + 5) * 2);
Funciones
LESS proporciona una gran variedad de funciones que transforman colores, manipulan cadenas
de caracteres o realizan operaciones matemticas. Todas las funciones estn documentadas en la
seccin sobre funciones.
Su uso es bastante obvio. En el siguiente ejemplo se usa el mtodo percentage para convertir el
valor 0.5 en 50%, se incrementa la saturacin de un color en un 5% y a continuacin se
selecciona un color de fondo que se ilumina un 25% y se modifica su perfil de color 8 grados:
@base: #f04615;
@width: 0.5;
.class {
width: percentage(0.5); // devuelve `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
Espacio de nombres
Algunas veces querrs agrupar variables o mixins, para tener tu cdigo organizado o
encapsulado. Puedes hacerlo de una manera bastante intuitiva en LESSsupongamos que
quieres agrupar algunos mixins y variables bajo el selector #bundle, para luego reutilizarlo o
distribuirlo:
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
Ahora si queremos usar la clase .button #header a, podemos hacer:

#header a {
color: orange;
#bundle > .button;
}
Puedes desbloquear mixins anidados dentro de un espacio de nombres llamando al mixin

propietario. Al actuar los mixins anidados como valores de retorno, todos estos mixins son
copiados en el espacio de nombres y estarn disponibles para usarlos:
.unlock(@value) { // mixin externo
.doSomething() { // mixin interno (anidado)
declaration: @value;
}
}
#namespace() {
.unlock(5); // desbloquea mixin doSomething
}
#use-namespace {
#namespace > .doSomething(); // tambin funciona con espacios de
nombres
}
Obtenemos:
#use-namespace {
declaration: 5;
}
mbito
El mbito de las variables en LESS es muy similar al de la mayora de lenguajes de
programacin. Las variables y los mixins se buscan primero en el mbito local, si no son
encontrados, el compilador buscar en el mbito inmediatamente superior, y as sucesivamente.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red

}
Comentarios
Los comentarios en LESS tienen el mismo formato que los comentarios en CSS:
/* Hola, soy un comentario CSS */
.class { color: black }
Los comentarios de una lnea tambin son vlidos en LESS, pero son 'silenciosos', es decir, no se
mostrar el cdigo CSS generado:
// Hola, soy un comentario silecioso, no aparecer en tu cdigo CSS
.class { color: white }
Importacin
Puedes importar ficheros CSS y LESS. nicamente se procesarn las importaciones de ficheros
LESS, las de ficheros CSS se mantendrn tal y como estn. Si quieres importar un fichero CSS, y
no quieres que LESS lo procese, solo tienes que especificar la extensin .css:
@import "lib.css";
Cuando se compila el cdigo se hace una nica cosa con las importaciones de ficheros CSS: las
sentencias de importacin de ficheros CSS son desplazados a la parte superior de la hoja de
estilo, justo despus de las declaraciones @charset.
Ejemplo de fichero de entrada con sentencias de importacin:
h1 { color: green; }
@import "import/official-branding.css?urlParameter=23";
las sentecias de importacin han sido desplazados a la parte superior:

@import "import/official-branding.css?urlParameter=23";
El contenido del fichero LESS importado es copiado en la hoja de estilo que lo importa y
compilado junto a l. Los ficheros importadores e importados comparten todos los mixins,
espacios de nombres, variables y otras estructuras.
Adems, si en la sentecia de importacin se han definido media queries, el contenido importado
estar encerrado en una declaracin @Media.
Fichero importado library.less:
@imported-color: red;
Fichero principal que importa el fichero anterior library.less:

@import "library.less" screen and (max-width: 400px); //
importacin con media queries
@import "library.less"; // importacin sin media queries
.class {
color: @importedColor; // uso de la variable importada
}
Se obtiene el siguiente resultado:
// Se corresponde a la importacin con media queries

@media screen and (max-width: 400px) {
}
// Se corresponde a la importacin sin media queries

.class {
// Se usa la variable importada
color: #ff0000;
}
Las sentencias de importacin de ficheros LESS no tienen que estar situadas en la parte superior
de la hoja de estilo. Puedes colocarla dentro de selectores, mixins y otras estructuras de LESS.
Ejemplo de importacin dentro de un selector:
pre {
@import "library.less";
color: @importedColor;
}
tanto las variables como las reglas definidas en library.less han sido copiadas en la regla pre:
pre {
color: #ff0000; // variable definida en library.less
}
pre h1 { // regla definida en el fichero library.less fue incluida
en la regla 'pre'
color: green;
}
En las versiones 1.3.0 - 1.3.3 @import importa un fichero tantas veces como haya sido
especificado, puedes sobrescribir este comportamiento con @import-once.
En la versin v1.4.0 @import-once ha sido eliminado y @import importa una nica vez por
defecto. sto significa lo siguiente
@import file.less;
@import file.less;
El segundo fichero es ignorado.

Cualquier fichero que no termine en .css se considerar un fichero less y por lo tanto se
procesar. Adems, si el fichero no tiene na extensin definida, el sufijo .less ser aadido al
final. Las siguientes lneas son equivalentes:
@import "lib.less";
@import "lib";
En la versin 1.4.0 puedes forzar que un fichero sea interpretado de una manera concreta
especificando un parmetro, por ejemplo:
@import (css) "lib";
Producir la siguiente salida

@import "lib";
y
@import (less) "lib.css";
Importar el fichero lib.css y lo tratar como un fichero less. Si especificas que un fichero es less
y no incluyes una extensin, no ser aadir ninguno.
Interpolacin de strings
Las variables pueden ser incluidas dentro de un string, al igual que en Ruby o PHP, con el
constructor@{name}:
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
Escape
Algunas veces es necesario generar un valor CSS que no es vlido dentro de la sintaxis de CSS,
o usar sintaxis propietario que no reconoce LESS.
Para generar tal valor, definimos un string precedida por ~, por ejemplo:
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
A este smbolo se le llamavalor de escape, cuyo resultado ser:

.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
Puedes usar la interpolacin exactamente igual que con un string:
.class {
@what: "Stuff";
filter: ~"ms:alwaysHasItsOwnSyntax.For.@{what}()";
}
Interpolacin de selectores
Si quieres usar variables LESS como selector, debes referenciar a dicha variable
usando @{selector} como en la interpolacin de cadenas de caracteres. Por ejemplo:
@name: blocked;
.@{name} {
color: black;
}
La salida ser
.blocked {
color: black;
}
Nota: en versiones anteriores a la 1.3.1 un selector del tipo (~"@{name}") era vlido, en la
versin 1.4.0 dejar de serlo.
Media Queries como Variables

Si quieres usar variables dentro de un media query, puedes hacerlo usando la sintxis comn para
referenciar variables @variable. Por ejemplo:
@singleQuery: ~"(max-width: 500px)";

@media screen, @singleQuery {
set {
padding: 3 3 3 3;
}
}
cuya compilacin ser:

@media screen, (max-width: 500px) {
set {
padding: 3 3 3 3;
}
}
La variable debe contener una sentencia media query completa. En caso contrario se producira
un error:@media screen y @partial {.
En la versin 1.4.0, con el modo strict math encendido, puedes incluir tambin variables dentro
de un media query, por ejemplo @media screen, (max-width: @width) {.
Evaluacin de JavaScript
Se pueden evaluar expresiones JavaScript dentro de ficheros .less. Recomendamos usar con
precaucin esta opcin, ya que LESS no ser compilable por puertos lo que hace que LESS sea
ms difcil de mantener. Si es posible, intenta pensar en una funcin que pueda lograr el mismo
objetivo o pregntalo en github. Tenemos planeado permitir la extensin de las funciones por
defecto. Sin embargo, si todava quieres usar JavaScript en un fichero .less, debes encerrar las
expresiones entre comillas simples:
@var: `"hello".toUpperCase() + '!'`;
Se convierte en:
@var: "HELLO!";
Date cuenta que puede usar tambin la interpolacin y el escape como en las cadenas de
caracteres:
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;
Se convierte en:
@var: HELLO!;
Tambin puedes acceder a las variables JavaScript:

@height: `document.body.clientHeight`;
Si quieres parsear una cadena JavaScript como un color representado en hexadecimal, puedes
usar la funcincolor:
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);
Referencia de funciones
Index
escape(@string);
// URL codifica una cadena
e(@string);
// escapa el contenido de una cadena
%(@string, values...);
// formatea un string
unit(@dimension, [@unit: ""]); // elimina o cambia la unidad de una

dimensin
color(@string);
data-uri([mimetype,] url);
devuelve la url()
// parsea un string a un color

// * codifica un recurso y
ceil(@number);
// redondea hacia arriba un entero
floor(@number);
// redondea hacia abajo un entero
percentage(@number);
// convierte un nmero en un
porcentaje %, por ejemplo 0.5 -> 50%
round(number, [places: 0]);
posiciones
// redondea un nmero un nmero de
sqrt(number);
nmero
// * calcula la raiz cuadrada de un
abs(number);
// * valor absoluto de un nmero
sin(number);
// * funcin seno
asin(number);
seno
// * funcin arcoseno - inversa del
cos(number);
// * funcin coseno
acos(number);
coseno
// * funcin arcocoseno - inverso de
tan(number);
// * funcin tangente
atan(number);
de tangente
// * funcin arcotangente - inverso
pi();
// * devuelve pi
pow(@base, @exponent);
argumento
// * primer argumento elevado al segundo
mod(number, number);
// * resto de la divisin entre el
primer argumento y el segundo
convert(number, units);
// * conversin entre tipos de nmeros
unit(number, units);
nmero
// * cambio de unidades sin convertir el
color(string);
escape en un color
// convierte un string o un valor de
rgb(@r, @g, @b);

color
// convierte en un
rgba(@r, @g, @b, @a);

color
// convierte en un
argb(@color);
// crea un #AARRGGBB
hsl(@hue, @saturation, @lightness);
// crea un color
hsla(@hue, @saturation, @lightness, @alpha); // crea un color

hsv(@hue, @saturation, @value);
// crea un color
hsva(@hue, @saturation, @value, @alpha);
// crea un color
hue(@color);
HSL
// devuelve el tono de @color en el espacio
saturation(@color);
espacio HSL
// devuelve la saturacin de @color en el
lightness(@color);
espacio HSL
// devuelve la luminosidad de @color en el
hsvhue(@color);
espacio HSV
// * devuelve el tono de @color en el
hsvsaturation(@color); // * devuelve la saturacin de @color en el

espacio HSV
hsvvalue(@color);
espacio HSV
// * devuelve la luminosidad de @color en el
red(@color);
// devuelve el canal rojo de @color
green(@color);
// devuelve el canal verde de @color
blue(@color);
// devuelve el canal azul de @color
alpha(@color);
// devuelve el canal alfa de @color
luma(@color);
@color
// devuelve la luma (brillo porceptual) de
saturate(@color, 10%);
*ms* saturado
// devuelve un color un 10%
desaturate(@color, 10%);
*menos* saturado
lighten(@color, 10%);
*ms iluminado*
darken(@color, 10%);
*ms oscuro*
fadein(@color, 10%);
*menos" transparente
fadeout(@color, 10%);
*ms* transparente
fade(@color, 50%);
transparencia del 50%
// devuelve @color con una
spin(@color, 10);
grados ms de tono
// devuelve un color con 10
mix(@color1, @color2, [@weight: 50%]);

@color1 y @color2
// devuelve la mezcla de
tint(@color, 10%);
mezclado con blanco al 10%
// devuelve un color
shade(@color, 10%);
mezclado con negro al 10%
// devuelve un color
greyscale(@color);
escala de grises, 100% desaturado
// devuelve el color en la
contrast(@color1, [@darkcolor: black], [@lightcolor: white],

[@threshold: 43%]);
// devuelve @darkcolor si
@color1 es > 43% de luma
@lightcolor, ver notas
// en otro caso devuelve
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything);
// devuelve true si se le
pasa un color, incluyendo las palabras claves de colores
isnumber(@numberOrAnything);
pasa un nmero en cualquier unidad
isstring(@stringOrAnything);
pasa un string
iskeyword(@keywordOrAnything);
pasa una palabra clave
isurl(@urlOrAnything);
pasa una url
ispixel(@pixelOrAnything);
pasa una dimensin en px
ispercentage(@percentageOrAnything);
pasa una dimensin en %
isem(@emOrAnything);
pasa una dimensin en em
isunit(@numberOrAnything, "rem");
// * devuelve true si el
primer parmetro es un nmero y est en la unidad especificada
// * Estas funciones solo estn disponibles en la versin 1.4.0

beta
Operaciones con strings

escape
Realiza el URL-encoding a los caracteres especiales encontrado en el string de entrada.
o Los siguientes caracteres son excepciones que no sern
codificados:: ,, /, ?, @, &, +, ', ~, ! y $.
o Los caracteres codificados ms comunes
son: <space>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ y =.
Parmetros:
o string: Un string a escapar
Devuelve: el contenido de string a escapar sin comillas.
Ejemplo:
escape('a=1')
Salida:
a%3D1
Nota: El comportamiento de la funcin para parmetros que no son strings no est definido. La
funcin devuelve undefined si se le pasa un color y la entrada no cambia para cualquier otro
tipo de argumento. Este comportamiento no est asegurado y podra cambiar en el futuro.
e
Escape CSS similar a la sintxis de ~"value". Se le pasa un string como parmetro y devuelve
su contenido pero sin comillas. Puede usarse para obtener un valor CSS que todava no es cdigo
CSS vlido, o usa sintxis propietaria que LESS no reconoce.
Parmetros:
o string: Un string a escapar
Devuelve: contenido del string sin comillas.
Ejemplo:
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
Salida:
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
Nota: La funcin tambin acepta valores escapados ~"" y nmeros. Cualquier otro tipo de
parmetro produce un error.
% format
La funcin %("format", arguments ...) formatea un string. El primer argumento es un
string con marcadores. Todos los marcadores comienzan con el smbolo % seguido de una
letra s,S,d,D,a, o A. Los argumentos restantes contienen las expresiones que van a reemplazar a
los marcadores. Si necesitas imprimir un smbolo de porcentaje, puedes hacerlo aadiendo otro
smbolo de porcentaje %%.
Usa marcadores en maysculas si necesitas escapar caracteres especiales usando su cdigo en
utf-8. La funcin escapa un carcter especial salvo ()'~!. El espacio se condifica como %20.
Los marcadores en minscula no convertirn los caracteres especiales.
Marcadores: * d, D, a, A - pueden ser remplazados por cualquier tipo de argumento (color,
nmero, valor de escape, expresin, ). Si las usas con un string, se usar el string completo -
incluyendo las comillas. Sin embargo, las comillas no sern modificadas ni escapadas por / ni
nada similar. * s, S - puede ser remplazado por cualquier tipo oo argumento excepto por colores.
Si las usas en combinacin con un string, solo el valor del string ser usado - las comillas del
string se omitirn
Parmetros:
o string: string a formatear con marcadores,
o anything* : valores que van a reemplazar a los marcadores.
Devuelve: string formateado.
Ejemplo:
format-a-d: %("repetitions: %a file: %d", 1 + 2,
"directory/file.less");
format-a-d-upper: %('repetitions: %A file: %D', 1 + 2,
format-s: %("repetitions: %s file: %s", 1 + 2,
format-s-upper: %('repetitions: %S file: %S', 1 + 2,
Salida:
format-a-d: "repetitions: 3 file: "directory/file.less"";
format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less
%22";
format-s: "repetitions: 3 file: directory/file.less";
format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
Otras funciones
color
Parsea un color, convierte un string cuyo contenido representa un color en ese color.
Parmetros:
o string: Un string que representa un color
Ejemplo:
color("#aaa");
Salida:
#aaa
unit
Elimina o cambia la unidad de una dimensin
Parmetros:
o dimension: Un nmero, con o sin una dimensin
o unit: Opcional: la unidad a la que se va a convertir, si se omite se eliminar la unidad
Ejemplo:
unit(5, px)
Salida:
5px
Ejemplo:
unit(5em)
Salida:
data-uri
Permite la inclusin de pequeos elementos de datos en lnea, como si fueran referenciados a una
fuente externa url() si la opcin ieCompat esta activada y el recurso es demasiado grande, o si
usas la funcin en el navegador. Si no se proporciona un tipo mime, node usa el paquete mime
para determinar el tipo mime correcto.
Parmetros:
o mimetype: un string que representa el tipo mime. Opcional
o url: La URL del fichero a incluir.
Ejemplo:
data-uri('../data/image.jpg');
Salida:
url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
Salida en el navegador:
url('../data/image.jpg');
Ejemplo:
data-uri('image/jpeg;base64', '../data/image.jpg');
Salida:
url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
Operaciones matemticas
ceil
Redondea el entero inmediatamente superior.
Parmetros:
o number: Un nmero decimal.
Devuelve: integer
Ejemplo:
ceil(2.4)
Salida:
3
floor
Redondea el entero inmediatamente inferior.
Parmetros:
o number: Un nmero decimal
Devuelve: integer
Ejemplo:
floor(2.6)
Salida:
percentage
Representa un nmero decimal como un porcentaje.
Parmetros:
o number: Un nmero decimal
Devuelve: string
Ejemplo:
percentage(0.5)
Salida:
50%
round
Redondea un nmero.
Parmetros:
o decimalPlaces: Opcional: El nmero de decimales a redondear. Por defecto es 0.
Devuelve: number
Ejemplo:
round(1.67)
Salida:
Ejemplo:
round(1.67, 1)
Salida:
1.7
sqrt
Calcula la raiz cuadrada de un nmero. No modifica las unidades.
Parmetros:
Devuelve: number
Ejemplo:
sqrt(25cm)
Salida:
5cm
Ejemplo:
sqrt(18.6%)
Salida:
4.312771730569565%;
abs
Calcula el valor absoluto de un nmero. No modifica las unidades.
Parmetros:
Salida: number
Ejemplo:
abs(25cm)
Salida:
25cm
Ejemplo:
abs(-18.6%)
Salida:
18.6%;
sin
Calcula la funcin seno. Usa radianes si se le pasa un nmero sin unidades.
Parmetros:
Salida: number
Ejemplo:
sin(1); // seno de 1 radian
sin(1deg); // seno de 1 grado
sin(1grad); // seno de 1 gradian
Salida:
0.8414709848078965; // seno de 1 radian
0.01745240643728351; // seno de 1 grado
0.015707317311820675; // seno de 1 gradian
asin
Calcula la funcin arcoseno (inversa del seno). Devuelve un nmero en radianes, un nmero
entre -/2 and /2.
Parmetros:
o number: Un nmero decimal comprendido en el intervalo [-1, 1].
Salida: number
Ejemplo:
asin(-0.8414709848078965)
asin(0)
asin(2)
Salida:
-1rad
0rad
NaNrad
cos
Calcula la funcin coseno. Usa radianes si no se especifica ninguna unidad.
Parmetros:
Salida: number
Ejemplo:
cos(1) // coseno de 1 radian
cos(1deg) // coseno de 1 grado
cos(1grad) // coseno de 1 gradian
Salida:
0.5403023058681398 // coseno de 1 radian
0.9998476951563913 // coseno de 1 grado
0.9998766324816606 // coseno de 1 gradian
acos
Calcula la funcin arcocoseno (inverso del coseno). Devuelve un nmero en radianes, un nmero
entre 0 y .
Parmetros:
o number: Un nmero decimal en el intervalo [-1, 1].
Salida: number
Ejemplo:
acos(0.5403023058681398)
acos(1)
acos(2)
Salida:
1rad
0rad
NaNrad
tan
Calcula la funcin tangente. Usa radianes si no se especifica ninguna unidad.
Parmetros:
Salida: number
Ejemplo:
tan(1) // tangente de 1 radian
tan(1deg) // tangente de 1 grado
tan(1grad) // tangente de 1 gradian
Salida:
1.5574077246549023 // tangente de 1 radian
0.017455064928217585 // tangente de 1 grado
0.015709255323664916 // tangente de 1 gradian
atan
Calcula la funcin arcotangente (inversa de la tangente). Devuelve un nmero en radianes, un
nmero entre -/2 and /2.
Parmetros:
Salida: number
Ejemplo:
atan(-1.5574077246549023)
atan(0)
round(atan(22), 6) // arcotangente de 22 redondeado a 6 decimales
Salida:
-1rad
0rad
1.525373rad;
pi
Devuelve el valor de (pi);
Parmetros:
o ninguno
Salida: number
Ejemplo:
pi()
Salida:
3.141592653589793
pow
Devuelve el valor del primer argumento elevado a la potencia del segundo argumento. El
resultado es devuelto en la misma unidad del primer argumento ignorando la del segundo
parmetro.
Parmetros:
o number: base - un nmero decimal.
o number: exponente - un nmero decimal.
Salida: number
Ejemplo:
pow(0cm, 0px)
pow(25, -2)
pow(25, 0.5)
pow(-25, 0.5)
pow(-25%, -0.5)
Salida:
1cm
0.0016
5
NaN
NaN%
mod
Devuelve el resto de la divisin entera entre el primer argumento y el segundo argumento. El
resultado es devuelto en la misma unidad del primer argumento ignorando la del segundo
parmetro. La funcin es capaz de manejar nmeros negativos y decimales.
Parmetros:
o number: un nmero decimal.
o number: un nmero decimal.
Salida: number
Ejemplo:
mod(0cm, 0px)
mod(11cm, 6px);
mod(-26%, -5);
Salida:
NaNcm;
5cm
-1%;
convert
Pasa de una unidad a otra. El primer argumento contiene un nmero con unidades y el segundo
argumento contiene una nueva unidad. Si ambas unidades son compatibles, el nmero sera
convertido. Si no son compatibles, la funcin devuelve el primer argumento sin modificar.
Unidades compatibles: * longitud: m, cm, mm, in, pt y pc, * tiempo: s y ms, *

ngulo: rad, deg, grad y turn.
Parmetros:
o number: un nmero decimal con unidades.
o identifier, string o escaped value: unidades
Salida: number
Ejemplo:
convert(9s, "ms")
convert(14cm, mm)
convert(8, mm) // unidades incompatibles
Salida:
9000ms
140mm
8
Unit
Cambia la unidad de un nmero. nicamente se modifica las unidades, el nmero no se
convierte. La funcin asume que el segundo parmetro contienen un tipo de unidad vlido.
Parmetros:
o number: un nmero decimal con unidades.
o identifier or escaped value: unidades.
Salida: number
Ejemplo:
unit(9s, ~"ms")
unit(-9, m)
Salida:
9ms
-9m
Color
Convierte un string o valor escapado en un color. La entrada debe contener un color en
hexadecimal o una representacin acortada.
Parmetros:
o identifier o escaped value con un color vlido en hexadecimal o representacin
acortada.
Salida: color
Ejemplo:
color("#445566")
color(~"#123")
Salida:
#445566
#112233
Funciones Color
Definicin de Color
rgb
Crea un color opaco a partir de valores decimales para los componentes rojo, verde y azul
(RGB). Tambin se puede usar los valores de color en HTML/CSS estndar, por
ejemplo #ff0000.
Parmetros:
o red: Un entero entre 0-255 o un porcentaje entre 0-100%.
o green: Un entero entre 0-255 o un porcentaje entre 0-100%.
o blue: Un entero entre 0-255 o un porcentaje entre 0-100%.
Salida: color
Ejemplo:
rgb(90, 129, 32)
Salida:
#5a8120
rgba
Crea un color transparente a partir de valores decimales para los componentes rojo, verde, azul y
alfa (RGBA).
Parmetros:
o red: Un entero entre 0-255 o un porcentaje entre 0-100%.
o green: Un entero entre 0-255 o un porcentaje entre 0-100%.
o blue: Un entero entre 0-255 o un porcentaje entre 0-100%.
o alpha: Un nmero decimal entre 0-1 o un porcentaje entre 0-100%.
Salida: color
Ejemplo:
rgba(90, 129, 32, 0.5)
Salida:
rgba(90, 129, 32, 0.5)
argb
Genera el cdigo hexadecimal de un color en formato #AARRGGBB (NO #RRGGBBAA!). Este
formato es usado en Internet Explorer, .NET y Android.
Parmetros:
o color: Un color.
Salida: string
Ejemplo:
argb(rgba(90, 23, 148, 0.5));
Salida:
#805a1794
hsl
Crea un color opaco a partir de los valores de tono, saturacin y luminosidad (HSL).
Parmetros:
o hue: Un entero entre 0-360 representando un grado.
o saturation: Un porcentaje entre 0-100% o un nmero entre 0-1.
o lightness: Un porcentaje entre 0-100% o un nmero entre 0-1.

Salida: color
Ejemplo:
hsl(90, 100%, 50%)
Salida:
#80ff00
Es til si deseas crear un color basado en el canal de otro color, por ejemplo:
@new: hsl(hue(@old), 45%, 90%);
@new tendr el tono de @old, y su propios valores de saturacin y luminosidad.
hsla
Crea un color transparente a partir de los valores de tono, saturacin, luminosidad y alfa (HSL).
Parmetros:
o hue: Un entereo entre 0-360 representando un grado.
o lightness: Un porcentaje entre 0-100% o un nmero entre 0-1.
o alpha: Un porcentaje entre 0-100% o un nmero entre 0-1.
Salida: color
Ejemplo:
hsl(90, 100%, 50%, 0.5)
Salida:
rgba(128, 255, 0, 0.5)
hsv
Crea un color opaco a partir de los valores de tono, saturacin y valor (HSV). Ntese que es
diferente a hsl, y es un modelo de color disponible en Photoshop.
Parmetros:
o value: Un porcentaje entre 0-100% o un nmero entre 0-1.
Salida: color
Ejemplo:
hsv(90, 100%, 50%)
Salida:
#408000
hsva
Crea un color transparente a partir de los valores de tono, saturacin, valor y alfa (HSVA). Note
que es diferente a hsl, y es un modelo de color disponible en Photoshop.
Parmetros:
o value: Un porcentaje entre 0-100% o un nmero entre 0-1.
o alpha: Un porcentaje entre 0-100% o un nmero entre 0-1.

Salida: color
Ejemplo:
hsva(90, 100%, 50%, 0.5)
Salida:
rgba(64, 128, 0, 0.5)
Informacin sobre el canal de color

hue
Obtiene el tono de un color.
Parmetros:
o color: Un color.
Salida: integer 0-360
Ejemplo:
hue(hsl(90, 100%, 50%))
Salida:
90
saturation
Obtiene la saturacin de un color.
Parmetros:
o color: Un color.
Salida: percentage 0-100
Ejemplo:
saturation(hsl(90, 100%, 50%))
Salida:
100%
lightness
Obtiene la luminosidad de un color.
Parmetros:
o color: Un color.
Ejemplo:
lightness(hsl(90, 100%, 50%))
Salida:
50%
hsvhue
Obtiene el tono de un color en el modelo HSV.
Parmetros:
o color: Un color.
Ejemplo:
hsvhue(hsv(90, 100%, 50%))
Salida:
90
hsvsaturation
Obtiene la saturacin de un color en el modelo HSV.
Parmetros:
o color: Un color.
Ejemplo:
hsvsaturation(hsv(90, 100%, 50%))
Salida:
100%
hsvvalue
Obtiene el valor de un color en el modelo HSV.
Parmetros:
o color: Un color.

Ejemplo:
hsvvalue(hsv(90, 100%, 50%))
Salida:
50%
red
Obtiene el componente rojo de un color.
Parmetros:
o color: Un color.
Ejemplo:
red(rgb(10, 20, 30))
Salida:
10
green
Obtiene el componente verde de un color.
Parmetros:
o color: Un color.
Ejemplo:
green(rgb(10, 20, 30))
Salida:
20
blue
Obtiene el componente azul de un color.
Parmetros:
o color: Un color.
Ejemplo:
blue(rgb(10, 20, 30))
Salida:
30
alpha
Obtiene el componente alfa de un color.
Parmetros:
o color: Un color.
Salida: float 0-1
Ejemplo:
alpha(rgba(10, 20, 30, 0.5))
Salida:
0.5
luma
Calcula la luma (brillo perceptual) de un color. Usa coeficientes SMPTE C / Rec. 709, como se
recomienda enWCAG 2.0. Este calculo tambin se usa en el contraste de funciones.
Parmetros:
o color: Un color.
Salida: percentage 0-100%
Ejemplo:
luma(rgb(100, 200, 30))
Salida:
65%
Operaciones con colores

Las operaciones con colores generalmente aceptan parmetros en las mismnas unidades cuando
los valores van a cambiar, y los porcentajes que se manejan son absolutos, por lo que
incrementar un 10% de un valor un 10% supone un incremento del 20% y no un 11%, y los
valores estan dentro de los rangos permmitidos. Cuando se muestran los valores, tambin se
muestran los formatos para aclarar lo que cada funcin ha realizado, adems del cdigo
hexadecimal que normalmente se usa.
saturate
Incrementa la saturacin de un color en una cantidad absoluta.

Parmetros:
o color: Un color.
o amount: Un porcentaje 0-100%.
Salida: color
Ejemplo:
saturate(hsl(90, 90%, 50%), 10%)
Salida:
#80ff00 // hsl(90, 100%, 50%)
desaturate
Decrementa la saturacin de un color en una cantidad absoluta.
Parmetros:
o color: Un color.
Salida: color
Ejemplo:
desaturate(hsl(90, 90%, 50%), 10%)
Salida:
#80e51a // hsl(90, 80%, 50%)
lighten
Incrementa la luminosidad de un color en una cantidad absoluta.
Parmetros:
o color: Un color.
o cantidad: Un porcentaje 0-100%.
Salida: color
Ejemplo:
lighten(hsl(90, 90%, 50%), 10%)
Salida:
#99f53d // hsl(90, 90%, 60%)
darken
Decrementa la luminosidad de un color en una cantidad absoluta.
Parmetros:
o color: Un color.
Salida: color
Ejemplo:
darken(hsl(90, 90%, 50%), 10%)
Salida:
#66c20a // hsl(90, 90%, 40%)
fadein
Reduce la transparencia (o incrementa la opacidad) de un color, hacindolo ms opaco. No tiene
efecto en colores opacos. El mtodo fadeout realiza la funcin opuerta.
Parmetros:
o color: Un color.
Salida: color
Ejemplo:
fadein(hsla(90, 90%, 50%, 0.5), 10%)
Salida:
rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)
fadeout
Incrementa la transparencia (o reducir la opacidad) de un color, hacindolo menos opaco. El
mtodo fadeinrealiza la funcin opuerta.
Parmetros:
o color: Un color.
Salida: color
Ejemplo:
fadeout(hsla(90, 90%, 50%, 0.5), 10%)
Salida:
rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.6)
fade
Fija la transparencia absoluta de un color. Puede ser aplicado tanto a colores opacos como
transparentes.
Parmetros:
o color: Un color.
Salida: color
Ejemplo:
fade(hsl(90, 90%, 50%), 10%)
Salida:
rgba(128, 242, 13, 0.1) // hsla(90, 90%, 50%, 0.1)
spin
Rota el ngulo del tono de un color en cualquier direccin. Aunque el valor del ngulo es 0-360,
se aplica un modulo de 360 al valor especificado, asi se puede usar valores ms grandes (incluso
negativos), por ejemplo, si se especifica un ngulo de 360 y 720 el resultado ser el mismo.
Ntese que los colores son pasados a travs de una conversin RGB que no conserva el tono para
colores grises (porque el tono no tiene sentido cuando no existe saturacin), as puedes
asegurarte de aplicar funciones de forma que el tono no sea modificado, por ejemplo prueba sto:
@c: saturate(spin(#aaaaaa, 10), 10%);
Haz prueba esto:

@c: spin(saturate(#aaaaaa, 10%), 10);
Los colores siempre son devueltos segn el modelo RGB, asi que aplicar spin a un valor grs no
servir de nada.
Parmetros:
o color: Un color.
o angle: Nmero de grados a rotar (+ or -).
Salida: color
Ejemplo:
spin(hsl(10, 90%, 50%), 20)
spin(hsl(10, 90%, 50%), -20)
Salida:
#f27f0d // hsl(30, 90%, 50%)
#f20d33 // hsl(350, 90%, 50%)
mix
Mezcla dos colores en una proporcin variable. Se incluye la opacidad en los clculos.
Parmetros:
o color1: Un color.
o color1: Un color.
o weight: Opcional, un balance de porcentajes entre los dos colores, por defecto ser el
50%.
Salida: color
Ejemplo:
mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
Salida:
#800080
rgba(75, 25, 0, 0.75)
greyscale
Elimina la saturacin de un color; similar al mtodo desaturate(@color, 100%). Al no verse
afectada por el tono la saturacin, el color resultante puede estar algo apagado o
turbio; luma puede porpociona un mejor resultado cuando se extrae un valor porcentual en vez
de un brillo linear, por ejemplogreyscale('#0000ff') devolver el mismo valor
que greyscale('#00ff00'), aunque puedan parecer bastante diferentes en brillo para el ojo
humano.
Parmetros:
o color: Un color.
Salida: color
Ejemplo:
greyscale(hsl(90, 90%, 50%))
Salida:
#808080 // hsl(90, 0%, 50%)
contrast
Elige cual de los dos colores proporciona un mayor contraste. Es til cuando se quiere asegurar
que un color es legible contra un fondo, lo cual es necesario para asegurar la accesibilidad de la
pgina. Este mtodo funciona de la misma manera que la funcin constrast en Compass para
SASS. De acuerdo con WCAG 2.0, los colores son comparado usando su valor de luma, no por
su luminosidad.
Los parmetros de luz y oscuridad pueden ser proporcionado en cualquier orden - la funcin
calcular su valores de luma y asigna la luz y la oscuridad apropiadamente.
Parmetros:
o color: Un color con el que comparar.
o oscuridad: opcional - color que delimita la oscuridad (por defecto negro).
o luz: opcional - color que delimita la luz (por defecto blanco).
o umbral: opcional - Un porcentaje entre 0-100% especificando la transicin de
oscuridad a luz (por defecto 43%). Se usa para predisponer el contraste de una forma
u otra, por ejemplo para permitirte decidir si el fondo gris 50% debera resultar en texto
blanco y negro. Generalmente deberas fijarlo en el valor ms bajo para los colores ms
claros y altos para los ms oscuros. Por defecto al 43%.
Salida: color
Ejemplo:
contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)
contrast(hsl(90, 100%, 50%),#000000,#ffffff,40%);
contrast(hsl(90, 100%, 50%),#000000,#ffffff,60%);
Salida:
#000000 // black
#ffffff // white
#dddddd
#000000 // black
#ffffff // white
Combinacin de colores
Estas operaciones son similares a los modos de mezcla encontrados en editores de imgenes
como Photoshop, Firework o GIMP, por lo que podrs usar estos mtodos para hacer que tus
colores CSS encajen con tus imgenes.
multiply
Multiplica dos colores. Se multiplican los valores de los colores en el canal RGB y luego se
divide el resultado entre 255. El resultado ser un color ms ocuro.
Parmetros:
o color1: Un color.
o color2: Un color.
Salida: color
Ejemplos:
multiply(#ff6600, #000000);
multiply(#ff6600, #333333);
multiply(#ff6600, #666666);
multiply(#ff6600, #999999);
multiply(#ff6600, #cccccc);
multiply(#ff6600, #ffffff);
multiply(#ff6600, #ff0000);
multiply(#ff6600, #00ff00);
multiply(#ff6600, #0000ff);
screen
Aplica el efecto contrario de multiply. El resultado es un color ms brillante.
Parmetros:
o color1: Un color.
o color2: Un color.
Salida: color
Ejemplo:
screen(#ff6600, #000000);
screen(#ff6600, #333333);
screen(#ff6600, #666666);
screen(#ff6600, #999999);
screen(#ff6600, #cccccc);
screen(#ff6600, #ffffff);
screen(#ff6600, #ff0000);
screen(#ff6600, #00ff00);
screen(#ff6600, #0000ff);
overlay
Combina el efecto de las funciones multiply y screen. Condicionalmente hace los canales
claros ms luminosos y los canales oscuros ms oscuros. Nota: Los resultados de las condiciones
estn determinados por el primer color que se le pasa como parmetro.
Parmetros:
o color1: Un color con el que cubrir el otro. Tambien es el color determinante que hace
que el color resultante sea mas claro o ms oscuro.
o color2: Un color para ser cubierto.
Salida: color
Ejemplo:
overlay(#ff6600, #000000);
overlay(#ff6600, #333333);
overlay(#ff6600, #666666);
overlay(#ff6600, #999999);
overlay(#ff6600, #cccccc);
overlay(#ff6600, #ffffff);
overlay(#ff6600, #ff0000);
overlay(#ff6600, #00ff00);
overlay(#ff6600, #0000ff);
softlight
Similar a overlay pero evita que el negro puro resulte negro puro, y el blanco puro resulte
blanco puro.
Parmetros:
o color1: Un color para suavizar la luz en el otro.
o color2: Un color cuya luz ser suavizada.
Salida: color
Ejemplo:
softlight(#ff6600, #000000);
softlight(#ff6600, #333333);
softlight(#ff6600, #666666);
softlight(#ff6600, #999999);
softlight(#ff6600, #cccccc);
softlight(#ff6600, #ffffff);
softlight(#ff6600, #ff0000);
softlight(#ff6600, #00ff00);
softlight(#ff6600, #0000ff);
hardlight
Similar a overlay pero usa el segundo color para detectar los canales de luz y de oscuridad en
vez del primer color.
Parmetros:
o color1: Un color para cubrir el otro.
o color2: Un color que ser cubierto. Tambin es el que determina si el color resultante es
ms claro o ms oscuro.
Salida: color
Ejemplo:
hardlight(#ff6600, #000000);
hardlight(#ff6600, #333333);
hardlight(#ff6600, #666666);
hardlight(#ff6600, #999999);
hardlight(#ff6600, #cccccc);
hardlight(#ff6600, #ffffff);
hardlight(#ff6600, #ff0000);
hardlight(#ff6600, #00ff00);
hardlight(#ff6600, #0000ff);
difference
Elimina el segundo color del primero. La operacin se realiza usando los canales RGB. El
resultado es un color ms oscuro.
Parmetros:
o color1: Un color que actua como minuendo.
o color2: Un color que actua como substraendo.
Salida: color
Ejemplo:
difference(#ff6600, #000000);
difference(#ff6600, #cccccc);
difference(#ff6600, #ffffff);
difference(#ff6600, #ff0000);
difference(#ff6600, #00ff00);
difference(#ff6600, #0000ff);
exclusion
Efecto similar a difference con un contraste ms bajo.
Parmetros:
Salida: color
Ejemplo:
exclusion(#ff6600, #000000);
exclusion(#ff6600, #333333);
exclusion(#ff6600, #666666);
exclusion(#ff6600, #999999);
exclusion(#ff6600, #cccccc);
exclusion(#ff6600, #ffffff);
exclusion(#ff6600, #ff0000);
exclusion(#ff6600, #00ff00);
exclusion(#ff6600, #0000ff);
average
Calcula la media de los dos colores. La operacin se realiza usando los canales RGB.
Parmetros:
o color1: Un color.
o color2: Un color.
Salida: color
Ejemplo:
average(#ff6600, #000000);
average(#ff6600, #333333);
average(#ff6600, #666666);
average(#ff6600, #999999);
average(#ff6600, #cccccc);
average(#ff6600, #ffffff);
average(#ff6600, #ff0000);
average(#ff6600, #00ff00);
average(#ff6600, #0000ff);
negation
Tiene el efecto opuesto a difference. El resultado es un color ms brillante. Nota: El
efecto opuesto no significa el efecto contrario al resultado a una operacin de adicin.
Parmetros:
Salida: color
Ejemplo:
negation(#ff6600, #000000);
negation(#ff6600, #333333);
negation(#ff6600, #666666);
negation(#ff6600, #999999);
negation(#ff6600, #cccccc);
negation(#ff6600, #ffffff);
negation(#ff6600, #ff0000);
negation(#ff6600, #00ff00);
negation(#ff6600, #0000ff);
Cambios
1.6.0
Por favor echa un vistazo en el registro de cambios para ver la lista completa de cambios
introducidos en esta versin.
Estamos rediseando la pgina Web. Puedes encontrar toda la informacin actualizada sobre
nuestro progreso en http://less.github.io/less-docs.
1.5.0
Se han realizado unos cuantos cambios internos em less (por ejemplo, los nodos ya no tienen
disponible la funcin toCSS), aunque no se han realizados cambios de ruptura en el lenguaje. A
continuacin vamos a ver algunos de los cambios realizados, mira el registro de cambios para
consultar la lista completa de cambios.
Respecto al uso, la opcin yui-compress ya no es soportada debido a un bug en ycssmin que no
ha sido solucionado. Se ha cambiado a clean-css. Si usas esta opcin In usage, we do no longer
support the yui-compress option due to a bug in ycssmin which was not getting fixed. We have
switched to clean-css. Si usas esta opcin, se usar clean-css y se imprimir una advertencia. La
nueva opcin se llama clean-css.
Ahora los sourcemap son soportados, lo que significa que puedes compilar tu cdigo less y luego
usar alguna herramienta para ver que parte de tu cdigo less genera algn trozo especfico del
cdigo css generado. Puedes habilitar esta opcin con source-map=filename. Hay otras
opciones, help est disponible si ejecutas lessc sin argumentos. Por ejemplo, si usas las opciones
source-map-less-inline source-map-map-inline, tusourcemap y todos los ficheros less sern
and all less files will be incluido en tu fichero css.
Ahora puedes importar tus ficheros css en la salido haciendo
@import (inline) "file.css";
Los selectores no estarn disponibles en tu cdigo less, nicamente se copiaran los ficheros
especificados en la salida. No ser comprimida a menos que uses la opcin clean-css.
Otra nueva caracterstica referente a las importaciones - reference. Se usa para importar cualquier
variable, mixin o selector, pero dicho elemento no aparecer en el cdigo generado.
por ejemplo, si tenemos
.a {
color: green;
}
en un fichero y lo importamos
@import (reference) "file.less";
el fichero no aparecer en el cdigo, pero podrs hacer lo siguiente
.b {
.a;
}
y color: green; solo aparecer nicamente en el selector .b. Tambin se puede usar esta opcin
con el mecanismo de herencia, de tal manera que puedes crear grupos de selectores ms
complejos en un fichero less o css en tu fichero principal. Un ejemplo de uso podra ser coger un
conjunto de selectores de bootstrap sin tener que incluir la librera completa.
Ahora tenemos la posibilidad de mezclar, que quiere decir lo siguiente
.a() {
transform+: rotateX(30deg);
}
.b {
transform+: rotateY(20deg);
.a();
}
obtendrs
.b {
transform: rotateY(20deg), rotateX(30deg);
}
Nota: aunque por convencin se debe dejar un espacio de separacin, creemos que todos los
navegadores soportan la separacin por comas para transform y otras propiedades donde sea til,
as que sta opcin siempre separa los valores mezclados por comas.
Y finalmente... ya puedes usar expresiones condicionadas en selectores css, por lo que en vez de
hacer lo siguiente
.a() when (@ie8 = true) {

color: black;
}
.a {
.a;
}
puedes hacer
.a when (@ie8 = true) {

color: black;
}
que har lo mismo. Nota: esta caracterstica no funcionar con selectores mltiples debido a la
ambigedad entre la sintaxis de la expresin condicionas y css.
Tambin puedes usar & solo para encerrar varios selectores, por ejemplo, en vez de escribir
.ie8() when (@ie8 = true) {

.b {
color: white;
}
// .. etc
}
.ie8();
puedes escribir.
& when (@ie8 = true) {

.b {
color: white;
}
// .. etc
}
1.4.0
La versin 1.4.0 ha sido lanzada. Esta versin incluye nuevas caractersticas tales como la
herencia, la funcin data-uri y muchas ms funciones matemticas. Visita el registro de
cambios para consultar la lista completa de cambios.
Alguno de ellos son conocidos como cambios de ruptura.
@import-once ha sido eliminado y ahora es el comportamiento por defecto para @import.
el selector de interpolacin cae en desuso (deprecated),
se recomienda usar en su lugar .myclass_@{index} { .... Funciona a partir de la versin
1.3.1.
(~".myclass_@{index}") { ...
Las versiones de los navegadores que ya no usen una versin de es5-shim.js - la versin que se
usaba anteriormente era imprecisa y la nueva versin es significativamente ms grande. Por
favor incluye es-5 shim o usa nicamente navegadores modernos.
Se ha introducido un modo opcional denominado strictMath, donde los parntesis son necesarios
para realizar operaciones matemticas, por ejemplo
(1 + 1)
// 2
1 + 1
// 1+1
En la versin 1.4.0 esta opcin est deshabilitada, pero estar habillitada por defecto en el futuro.
Se recomienda que actualices tu cdigo y habilites esta opcin (strict-math=on en lnea de
comando o strictMath: true en JavaScript). El cdigo escrito entre parntesis es compatible con
versiones anteriores del compilador less.
Tambien hemos aadido una opcin para el uso estricto de unidades (strictUnits: true o strictunits=on) la cual obliga al compilador de less a valildar que las unidades usadas sean correctas
(por ejemplo 4px/2px = 2, en cambio 2px y 4em/2px producirn un error). No hay planes para
habilitar esta opcin por defecto permanentemente, pero algunos usuarios lo encontraran til
para la deteccin de errores.
Las unidades matemticas estn terminadas, (4px * 3em) / 4px sola ser igual a 3em y
ahora es igual a 3px. No obstante, no se usarn nmeros sin unidades a menos que el modo
estricto est activado. El selector interpolacin y los cambios en las funciones matemticas y en
las unidades compilarn correctamente en less 1.3.3.

Less

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Less

Cargado por

Copyright:

Formatos disponibles

Nueva pgina

.rounded-corners (@radius: 5px) { #header {

Funciones & Operaciones

Uso del lado del cliente

// carga las importaciones de manera

// carga las importaciones de manera

// cuando est activado el modo

// funciones del usuario,

dumpLineNumbers: "comments", // o "mediaQuery" o "all"

Uso del lado del servidor

Uso de la lnea de comando

cualquier fichero que desees:

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

parser.parse('.class { width: (1 + 1) }', function (err, tree) {

parser.parse('.class { width: (1 + 1) }', function (e, tree) {

#header { color: @light-blue; }

#header { color: #6c94be; }

Tambin se les puede asignar un nombre:

Cuya salida ser:

tambin es vlido el siguiente:

ambos obtienen la misma salida:

Ahora podemos llamarlos de la siguiente manera:

De esta manera incluiremos la propiedad border-radius con un valor de 5px.

La salida generada ser:

Mixins Con Mltiples Parmetros

Cuyo resultado es:

-moz-box-shadow: 2px 5px 1px #000;

Argumentos adelantados y la variable@rest

// acepta 0-N argumentos

// acepta exctamente 0 argumentos

// acepta entre 0-1 argumentos

.mixin (@a: 1; ...) { // acepta entre 0-N argumentos

// acepta entre 1-N argumentos

.mixin (@a; @rest...) {

@global: outer-scope; // non-local variable - sobrescrita

La Palabra Clave !important

Patrones y expresiones condicionadas

color: lighten(@color, 10%);

Obtendremos la siguiente salida:

Obtenemos la siguiente salida:

Cualquier otro valor que no sea true ser falso:

Se pueden comparar argumentos entre s o con otras variables:

.mixin (@a) when (@media = mobile) { ... }

.max (@a; @b) when (@a > @b) { width: @a }

Estn son las funciones que comprueban los tipos bsicos:

Y la palabra clave not para negar condiciones:

En LESS, se puede escribir de la siguiente forma:

Es resultado es un cdigo ms conciso e imita mejor la estructura de tu rbol DOM.

Media Queries anidadas

Uso anticipado de &

Obtendremos la siguiente salida:

color: (#888 / 4);

La salida es mucho ms simple de lo que cabe esperarLESS entiende la diferencia entre

LESS usar esa unidad en el resultado final6px en este caso.

Ahora si queremos usar la clase .button #header a, podemos hacer:

Puedes desbloquear mixins anidados dentro de un espacio de nombres llamando al mixin

color: @var; // red

las sentecias de importacin han sido desplazados a la parte superior:

Fichero principal que importa el fichero anterior library.less:

Se obtiene el siguiente resultado:

// Se corresponde a la importacin con media queries

// Se corresponde a la importacin sin media queries

El segundo fichero es ignorado.

Producir la siguiente salida