Al ser una extensión de CSS, LESS no es solo retrocompatible con CSS, sino que proporciona características extras usando sintaxis CSS. Ésto hace que aprender LESS sea muy sencillo, y si tienes dudas, siempre podrás 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; }

También 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 definición de la variable, buscando desde el ámbito actual hacia arriba. Similar a lo que ocurre en CSS donde la última propiedad dentro de una definición 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 código es válido:

lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

también es válido 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;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

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 serán incluidas en el ámbito actual. Este comportamiento puede ser modificado en el futuro.

Mixins Paramétricos

LESS tiene un tipo especial de selector que puede ser mezclado como si fuera una regla, pudiendo además aceptar parámetros. A continuación un ejemplo sencillo:

.border-radius (@radius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

Y aquí vemos como podemos usarla en varios selectores con diferentes parámetros:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

Se pueden definir valores por defecto para los parámetros de los mixins paramétricos:

.border-radius (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

Ahora podemos llamarlos de la siguiente manera:

#header {
  .border-radius;
}

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

Además, podemos definir mixins paramétricos a los que no se les pase ningún parámetro. 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 Múltiples Parámetros

Los parámetros 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 parámetros de un mixin o el separador de los elementos de una lista css.

Usar la coma como separador del mixin impediría 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 estarán separados por punto y coma y todas la comas pertenecen a listas css:

• dos argumentos y cada uno contienen una lista separadas por comas: .name(1, 2, 3; something, else),
• tres argumentos y cada uno contiene un número: .name(1, 2, 3),
• usar un punto y coma inútil para crear una llamada al mixin con un argumento que contiene una lista deparada por comas: .name(1, 2, 3;),
• valor por defecto separado por comas: .name(@param1: red, blue;).

Es legal definir múltiples mixins con el mismo nombre y el mismo número de parámetros. Less usará las reglas de todos los mixins que puedan aplicarse. Si usas el mixin con un solo parámetro, por ejemplo .mixin(green);, serán seleccionadas las reglas de todos los mixins que tengan exactamente un parámetro obligatorio, es decir, no tengán 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 parámetros 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 número variable de argumentos. Usándolo después del nombre de una variable, se incluirá la variable a estos argumentos.

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

Además:

.mixin (@a; @rest...) {
   // @rest hace referencia a los argumentos definidos después 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 continuación 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 también puedes ser llamados. En esta ocasión, no existirá protección dentro del ámbito local, es decir, que los mixins desbloqueados sobrescribirán 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 estarán disponibles después de que hayan sido desbloqueados. En el siguiente ejemplo se lanzaría un error sintáctico:

.doSomething(); // error sintáctico: mixin interno no está todavía disponible
.unlock(5); // demasiado tarde

La Palabra Clave !important

Puedes usar la palabra clave !important después 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 basándote en los parámetros 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, podríamos 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 continuación:

@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 sería un color más oscuro.

Lo que ha pasado ha sido lo siguiente:

• La primera definición del mixin no es invocada porque espera el valor dark como primer argumento.
• La segunda definición es invocada, ya que espera el valor light.
• La tercera definición también es invocada porque espera cualquier valor.

Solo se invocan los mixins cuya definición encaja con los parámetros 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 definición, mientras que si lo llamamos con dos argumentos, obtendremos la segunda definición, en concreto @a se desteñirá un @b.

Expresiones condicionadas

Las expresiones condicionadas se usan cuando quieres invocar un mixins cuando cumple una condición determinada, en vez del valor de algún parámetro o la aridad. Si estás familiarizado con la programación funcional, ya conocerás 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 opción @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 condición (en esta ocasión una sola). Si ejecutamos el código 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 lógicos que se pueden usar son: > >= = =< <. Además, 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 condición es evaluada como true, se considerará toda condición 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 algún valor, se pueden usar las funciones is*:

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

Están son las funciones que comprueban los tipos básicos:

• iscolor
• isnumber
• isstring
• iskeyword
• isurl

Si se quiere comprobar si algún valor, además de ser un número, está definido en una unidad específica, se hace uso de una de las siguientes funciones:

• ispixel
• ispercentage
• isem
• 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 también 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 código más conciso e imita mejor la estructura de tu árbol DOM.

Nótese 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;
}

También puedes usar & en mixins para referenciar un anidamiento que está fuera de la definición del mixin.

Herencia

A partir de la versión 1.4, LESS permite heredar un estilo. Se podría decir que la herencia es el mecanismo opuesto a un mixin. En vez de añadir 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 diseñado 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 código CSS generado en comparación con el uso de mixins.

El selector extend puede usarse en la misma línea 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 añadir all al selector en la expresión 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 número, color o variable. Las operaciones deberían estar definidas entre paréntesis. A continuación 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 más simple de lo que cabe esperar—LESS entiende la diferencia entre colores y unidades. Si una unidad es usada en una operación, como por ejemplo aquí:

@var: (1px + 5);

LESS usará esa unidad en el resultado final—6px en este caso.

También se permite el uso anidado de paréntesis 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 matemáticas. Todas las funciones están documentadas en la sección sobre funciones.

Su uso es bastante obvio. En el siguiente ejemplo se usa el método percentage para convertir el valor 0.5 en 50%, se incrementa la saturación de un color en un 5% y a continuación 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 querrás agrupar variables o mixins, para tener tu código organizado o encapsulado. Puedes hacerlo de una manera bastante intuitiva en LESS—supongamos 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 estarán disponibles para usarlos:

.unlock(@value) { // mixin externo
  .doSomething() { // mixin interno (anidado)
    declaration: @value;
  }
}

#namespace() {
  .unlock(5); // desbloquea mixin doSomething
}

#use-namespace { 
  #namespace > .doSomething(); // también funciona con espacios de nombres
}

Obtenemos:

#use-namespace {
  declaration: 5;
}

Ámbito

El ámbito de las variables en LESS es muy similar al de la mayoría de lenguajes de programación. 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 línea también son válidos en LESS, pero son 'silenciosos', es decir, no se mostrará el código CSS generado:

// Hola, soy un comentario silecioso, no aparecerá en tu código CSS
.class { color: white }

Importación

Puedes importar ficheros CSS y LESS. Únicamente se procesarán las importaciones de ficheros LESS, las de ficheros CSS se mantendrán tal y como están. Si quieres importar un fichero CSS, y no quieres que LESS lo procese, solo tienes que especificar la extensión .css:

@import "lib.css";

Cuando se compila el código se hace una única cosa con las importaciones de ficheros CSS: las sentencias de importación de ficheros CSS son desplazados a la parte superior de la hoja de estilo, justo después de las declaraciones @charset.

Ejemplo de fichero de entrada con sentencias de importación:

h1 { color: green; }
@import "import/official-branding.css?urlParameter=23";

las sentecias de importación han sido desplazados a la parte superior:

@import "import/official-branding.css?urlParameter=23";
h1 { color: green; }

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.

Además, si en la sentecia de importación se han definido media queries, el contenido importado estará encerrado en una declaración @Media.

Fichero importado “library.less”:

@imported-color: red;
h1 { color: green; }

Fichero principal que importa el fichero anterior library.less:

@import "library.less" screen and (max-width: 400px); // importación con media queries
@import "library.less"; // importación sin media queries

.class {
  color: @importedColor; // uso de la variable importada
}

Se obtiene el siguiente resultado:

// Se corresponde a la importación con media queries
@media screen and (max-width: 400px) {
  h1 { color: green; }
}

// Se corresponde a la importación sin media queries
h1 { color: green; }
.class {
  // Se usa la variable importada
  color: #ff0000;
}

Las sentencias de importación 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 importación 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 versión 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á. Además, si el fichero no tiene úna extensión definida, el sufijo “.less” será añadido al final. Las siguientes líneas son equivalentes:

@import "lib.less";
@import "lib";

En la versión 1.4.0 puedes forzar que un fichero sea interpretado de una manera concreta especificando un parámetro, 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 extensión, no ser añadirá ninguno.

Interpolación 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 válido 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 símbolo se le llama“valor de escape”, cuyo resultado será:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

Puedes usar la interpolación exactamente igual que con un string:

.class {
  @what: "Stuff";
  filter: ~"ms:alwaysHasItsOwnSyntax.For.@{what}()";
}

Interpolación de selectores

Si quieres usar variables LESS como selector, debes referenciar a dicha variable usando @{selector} como en la interpolación 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 válido, en la versión 1.4.0 dejará de serlo.

Media Queries como Variables

Si quieres usar variables dentro de un media query, puedes hacerlo usando la sintáxis común para referenciar variables @variable. Por ejemplo:

@singleQuery: ~"(max-width: 500px)";
@media screen, @singleQuery {
  set {
    padding: 3 3 3 3;
  }
}

cuya compilación 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 produciría un error: @media screen y @partial {.

En la versión 1.4.0, con el modo strict math encendido, puedes incluir también variables dentro de un media query, por ejemplo @media screen, (max-width: @width) {.

Evaluación de JavaScript

Se pueden evaluar expresiones JavaScript dentro de ficheros .less. Recomendamos usar con precaución esta opción, ya que LESS no será compilable por puertos lo que hace que LESS sea más difícil de mantener. Si es posible, intenta pensar en una función que pueda lograr el mismo objetivo o pregúntalo en github. Tenemos planeado permitir la extensión de las funciones por defecto. Sin embargo, si todavía 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 también la interpolación y el escape como en las cadenas de caracteres:

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

Se convierte en:

@var: HELLO!;

También 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 función color:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

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 dimensión
color(@string);                // parsea un string a un color
data-uri([mimetype,] url);       // * codifica un recurso y devuelve la url()

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

rgb(@r, @g, @b);                             // convierte en un color
rgba(@r, @g, @b, @a);                        // convierte en un color
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);           // devuelve el tono de @color en el espacio HSL
saturation(@color);    // devuelve la saturación de @color en el espacio HSL
lightness(@color);     // devuelve la luminosidad de @color en el espacio HSL
hsvhue(@color);        // * devuelve el tono de @color en el espacio HSV
hsvsaturation(@color); // * devuelve la saturación de @color en el espacio HSV
hsvvalue(@color);      // * devuelve la luminosidad de @color en el espacio HSV
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);          // devuelve la luma (brillo porceptual) de @color

saturate(@color, 10%);                  // devuelve un color un 10% *más* saturado
desaturate(@color, 10%);                // devuelve un color un 10% *menos* saturado
lighten(@color, 10%);                   // devuelve un color un 10% *más iluminado*
darken(@color, 10%);                    // devuelve un color un 10% *más oscuro*
fadein(@color, 10%);                    // devuelve un color un 10% *menos" transparente
fadeout(@color, 10%);                   // devuelve un color un 10% *más* transparente
fade(@color, 50%);                      // devuelve @color con una transparencia del 50%
spin(@color, 10);                       // devuelve un color con 10 grados más de tono
mix(@color1, @color2, [@weight: 50%]);  // devuelve la mezcla de @color1 y @color2
tint(@color, 10%);                      // devuelve un color mezclado con blanco al 10%
shade(@color, 10%);                     // devuelve un color mezclado con negro al 10%
greyscale(@color);                      // devuelve el color en la escala de grises, 100% desaturado
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); 
                                        // devuelve @darkcolor si @color1 es > 43% de luma
                                        // en otro caso devuelve @lightcolor, ver notas

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);            // devuelve true si se le pasa un número en cualquier unidad
isstring(@stringOrAnything);            // devuelve true si se le pasa un string
iskeyword(@keywordOrAnything);          // devuelve true si se le pasa una palabra clave
isurl(@urlOrAnything);                  // devuelve true si se le pasa una url
ispixel(@pixelOrAnything);              // devuelve true si se le pasa una dimensión en px
ispercentage(@percentageOrAnything);    // devuelve true si se le pasa una dimensión en %
isem(@emOrAnything);                    // devuelve true si se le pasa una dimensión en em
isunit(@numberOrAnything, "rem");       // * devuelve true si el primer parámetro es un número y está en la unidad especificada

// * Estas funciones solo están disponibles en la versión 1.4.0 beta

Operaciones con strings

escape

Realiza el URL-encoding a los caracteres especiales encontrado en el string de entrada.

• Los siguientes caracteres son excepciones que no serán codificados:: ,, /, ?, @, &, +, ', ~, ! y $.
• Los caracteres codificados más comunes son: <space>, #, ^, (, ), {, }, |, :, >, <, ;, ], [ y =.

Parámetros:

• 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 función para parámetros que no son strings no está definido. La función 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 podría cambiar en el futuro.

e

Escape CSS similar a la sintáxis de ~"value". Se le pasa un string como parámetro y devuelve su contenido pero sin comillas. Puede usarse para obtener un valor CSS que todavía no es código CSS válido, o usa sintáxis propietaria que LESS no reconoce.

Parámetros:

• 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 función también acepta valores escapados ~"" y números. Cualquier otro tipo de parámetro produce un error.

% format

La función %("format", arguments ...) formatea un string. El primer argumento es un string con marcadores. Todos los marcadores comienzan con el símbolo % 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 símbolo de porcentaje, puedes hacerlo añadiendo otro símbolo de porcentaje %%.

Usa marcadores en mayúsculas si necesitas escapar caracteres especiales usando su código en utf-8. La función escapa un carácter especial salvo ()'~!. El espacio se condifica como %20. Los marcadores en miníscula no convertirán los caracteres especiales.

Marcadores: * d, D, a, A - pueden ser remplazados por cualquier tipo de argumento (color, número, valor de escape, expresión, …). Si las usas con un string, se usará el string completo - incluyendo las comillas. Sin embargo, las comillas no serán modificadas ni escapadas por “/” ni nada similar. * s, S - puede ser remplazado por cualquier tipo oo argumento excepto por colores. Si las usas en combinación con un string, solo el valor del string será usado - las comillas del string se omitirán

Parámetros:

• string: string a formatear con marcadores,
• 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, "directory/file.less");
format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less");
format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");

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.

Parámetros:

• string: Un string que representa un color

Ejemplo:

color("#aaa");

Salida:

#aaa

unit

Elimina o cambia la unidad de una dimensión

Parámetros:

• dimension: Un número, con o sin una dimensión
• 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:

5

data-uri

Permite la inclusión de pequeños elementos de datos en línea, como si fueran referenciados a una fuente externa url() si la opción ieCompat esta activada y el recurso es demasiado grande, o si usas la función en el navegador. Si no se proporciona un tipo mime, node usa el paquete mime para determinar el tipo mime correcto.

Parámetros:

• mimetype: un string que representa el tipo mime. Opcional
• 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 matemáticas

ceil

Redondea el entero inmediatamente superior.

Parámetros:

• number: Un número decimal.

Devuelve: integer

Ejemplo:

ceil(2.4)

Salida:

3

floor

Redondea el entero inmediatamente inferior.

Parámetros:

• number: Un número decimal

Devuelve: integer

Ejemplo:

floor(2.6)

Salida:

2

percentage

Representa un número decimal como un porcentaje.

Parámetros:

• number: Un número decimal

Devuelve: string

Ejemplo:

percentage(0.5)

Salida:

50%

round

Redondea un número.

Parámetros:

• number: Un número decimal.
• decimalPlaces: Opcional: El número de decimales a redondear. Por defecto es 0.

Devuelve: number

Ejemplo:

round(1.67)

Salida:

2

Ejemplo:

round(1.67, 1)

Salida:

1.7

sqrt

Calcula la raiz cuadrada de un número. No modifica las unidades.

Parámetros:

• number: Un número decimal.

Devuelve: number

Ejemplo:

sqrt(25cm)

Salida:

5cm

Ejemplo:

sqrt(18.6%)

Salida:

4.312771730569565%;

abs

Calcula el valor absoluto de un número. No modifica las unidades.

Parámetros:

• number: Un número decimal.

Salida: number

Ejemplo:

abs(25cm)

Salida:

25cm

Ejemplo:

abs(-18.6%)

Salida:

18.6%;

sin

Calcula la función seno. Usa radianes si se le pasa un número sin unidades.

Parámetros:

• number: Un número decimal.

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 función arcoseno (inversa del seno). Devuelve un número en radianes, un número entre -π/2 and π/2.

Parámetros:

• number: Un número decimal comprendido en el intervalo [-1, 1].

Salida: number

Ejemplo:

asin(-0.8414709848078965)
asin(0) 
asin(2)

Salida:

-1rad
0rad
NaNrad

cos

Calcula la función coseno. Usa radianes si no se especifica ninguna unidad.

Parámetros:

• number: Un número decimal.

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 función arcocoseno (inverso del coseno). Devuelve un número en radianes, un número entre 0 y π.

Parámetros:

• number: Un número decimal en el intervalo [-1, 1].

Salida: number

Ejemplo:

acos(0.5403023058681398)
acos(1) 
acos(2)

Salida:

1rad
0rad
NaNrad

tan

Calcula la función tangente. Usa radianes si no se especifica ninguna unidad.

Parámetros:

• number: Un número decimal.

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 función arcotangente (inversa de la tangente). Devuelve un número en radianes, un número entre -π/2 and π/2.

Parámetros:

• number: Un número decimal.

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);

Parámetros:

• 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 parámetro.

Parámetros:

• number: base - un número decimal.
• number: exponente - un número 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 división entera entre el primer argumento y el segundo argumento. El resultado es devuelto en la misma unidad del primer argumento ignorando la del segundo parámetro. La función es capaz de manejar números negativos y decimales.

Parámetros:

• number: un número decimal.
• number: un número 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 número con unidades y el segundo argumento contiene una nueva unidad. Si ambas unidades son compatibles, el número sera convertido. Si no son compatibles, la función 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.

Parámetros:

• number: un número decimal con unidades.
• 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 número. Únicamente se modifica las unidades, el número no se convierte. La función asume que el segundo parámetro contienen un tipo de unidad válido.

Parámetros:

• number: un número decimal con unidades.
• 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 representación acortada.

Parámetros:

• identifier o escaped value con un color válido en hexadecimal o representación acortada.

Salida: color

Ejemplo:

color("#445566")
color(~"#123")

Salida:

#445566
#112233

Funciones Color

Definición de Color

rgb

Crea un color opaco a partir de valores decimales para los componentes rojo, verde y azul (RGB). También se puede usar los valores de color en HTML/CSS estándar, por ejemplo #ff0000.

Parámetros:

• red: Un entero entre 0-255 o un porcentaje entre 0-100%.
• green: Un entero entre 0-255 o un porcentaje entre 0-100%.
• 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).

Parámetros:

• red: Un entero entre 0-255 o un porcentaje entre 0-100%.
• green: Un entero entre 0-255 o un porcentaje entre 0-100%.
• blue: Un entero entre 0-255 o un porcentaje entre 0-100%.
• alpha: Un número 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 código hexadecimal de un color en formato #AARRGGBB (NO #RRGGBBAA!). Este formato es usado en Internet Explorer, .NET y Android.

Parámetros:

• 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, saturación y luminosidad (HSL).

Parámetros:

• hue: Un entero entre 0-360 representando un grado.
• saturation: Un porcentaje entre 0-100% o un número entre 0-1.
• lightness: Un porcentaje entre 0-100% o un número 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 saturación y luminosidad.

hsla

Crea un color transparente a partir de los valores de tono, saturación, luminosidad y alfa (HSL).

Parámetros:

• hue: Un entereo entre 0-360 representando un grado.
• saturation: Un porcentaje entre 0-100% o un número entre 0-1.
• lightness: Un porcentaje entre 0-100% o un número entre 0-1.
• alpha: Un porcentaje entre 0-100% o un número 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, saturación y valor (HSV). Nótese que es diferente a hsl, y es un modelo de color disponible en Photoshop.

Parámetros:

• hue: Un entereo entre 0-360 representando un grado.
• saturation: Un porcentaje entre 0-100% o un número entre 0-1.
• value: Un porcentaje entre 0-100% o un número entre 0-1.

Salida: color

Ejemplo:

hsv(90, 100%, 50%)

Salida:

#408000

hsva

Crea un color transparente a partir de los valores de tono, saturación, valor y alfa (HSVA). Note que es diferente a hsl, y es un modelo de color disponible en Photoshop.

Parámetros:

• hue: Un entereo entre 0-360 representando un grado.
• saturation: Un porcentaje entre 0-100% o un número entre 0-1.
• value: Un porcentaje entre 0-100% o un número entre 0-1.
• alpha: Un porcentaje entre 0-100% o un número entre 0-1.

Salida: color

Ejemplo:

hsva(90, 100%, 50%, 0.5)

Salida:

rgba(64, 128, 0, 0.5)

Información sobre el canal de color

hue

Obtiene el tono de un color.

Parámetros:

• color: Un color.

Salida: integer 0-360

Ejemplo:

hue(hsl(90, 100%, 50%))

Salida:

90

saturation

Obtiene la saturación de un color.

Parámetros:

• color: Un color.

Salida: percentage 0-100

Ejemplo:

saturation(hsl(90, 100%, 50%))

Salida:

100%

lightness

Obtiene la luminosidad de un color.

Parámetros:

• color: Un color.

Salida: percentage 0-100

Ejemplo:

lightness(hsl(90, 100%, 50%))

Salida:

50%

hsvhue

Obtiene el tono de un color en el modelo HSV.

Parámetros:

• color: Un color.

Salida: integer 0-360

Ejemplo:

hsvhue(hsv(90, 100%, 50%))

Salida:

90

hsvsaturation

Obtiene la saturación de un color en el modelo HSV.

Parámetros:

• color: Un color.

Salida: percentage 0-100

Ejemplo:

hsvsaturation(hsv(90, 100%, 50%))

Salida:

100%

hsvvalue

Obtiene el valor de un color en el modelo HSV.

Parámetros:

• color: Un color.

Salida: percentage 0-100

Ejemplo:

hsvvalue(hsv(90, 100%, 50%))

Salida:

50%

red

Obtiene el componente rojo de un color.

Parámetros:

• color: Un color.

Salida: integer 0-255

Ejemplo:

red(rgb(10, 20, 30))

Salida:

10

green

Obtiene el componente verde de un color.

Parámetros:

• color: Un color.

Salida: integer 0-255

Ejemplo:

green(rgb(10, 20, 30))

Salida:

20

blue

Obtiene el componente azul de un color.

Parámetros:

• color: Un color.

Salida: integer 0-255

Ejemplo:

blue(rgb(10, 20, 30))

Salida:

30

alpha

Obtiene el componente alfa de un color.

Parámetros:

• 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 en WCAG 2.0. Este calculo también se usa en el contraste de funciones.

Parámetros:

• color: Un color.

Salida: percentage 0-100%

Ejemplo:

luma(rgb(100, 200, 30))

Salida:

65%

Operaciones con colores

Las operaciones con colores generalmente aceptan parámetros 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, también se muestran los formatos para aclarar lo que cada función ha realizado, además del código hexadecimal que normalmente se usa.

saturate

Incrementa la saturación de un color en una cantidad absoluta.

Parámetros:

• color: Un color.
• amount: Un porcentaje 0-100%.

Salida: color

Ejemplo:

saturate(hsl(90, 90%, 50%), 10%)

Salida:

#80ff00 // hsl(90, 100%, 50%)

desaturate

Decrementa la saturación de un color en una cantidad absoluta.

Parámetros:

• color: Un color.
• amount: Un porcentaje 0-100%.

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.

Parámetros:

• color: Un color.
• 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.

Parámetros:

• color: Un color.
• cantidad: Un porcentaje 0-100%.

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, haciéndolo más opaco. No tiene efecto en colores opacos. El método fadeout realiza la función opuerta.

Parámetros:

• color: Un color.
• cantidad: Un porcentaje 0-100%.

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, haciéndolo menos opaco. El método fadein realiza la función opuerta.

Parámetros:

• color: Un color.
• cantidad: Un porcentaje 0-100%.

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.

Parámetros:

• color: Un color.
• amount: Un porcentaje 0-100%.

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 dirección. Aunque el valor del ángulo es 0-360, se aplica un modulo de 360 al valor especificado, asi se puede usar valores más grandes (incluso negativos), por ejemplo, si se especifica un ángulo de 360 y 720 el resultado será el mismo. Nótese que los colores son pasados a través de una conversión RGB que no conserva el tono para colores grises (porque el tono no tiene sentido cuando no existe saturación), 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 según el modelo RGB, asi que aplicar spin a un valor grís no servirá de nada.

Parámetros:

• color: Un color.
• angle: Número 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 proporción variable. Se incluye la opacidad en los cálculos.

Parámetros:

• color1: Un color.
• color1: Un color.
• 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 saturación de un color; similar al método desaturate(@color, 100%). Al no verse afectada por el tono la saturación, 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 ejemplo greyscale('#0000ff') devolverá el mismo valor que greyscale('#00ff00'), aunque puedan parecer bastante diferentes en brillo para el ojo humano.

Parámetros:

• 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 página. Este método funciona de la misma manera que la función 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 parámetros de luz y oscuridad pueden ser proporcionado en cualquier orden - la función calculará su valores de luma y asigna la luz y la oscuridad apropiadamente.

Parámetros:

• color: Un color con el que comparar.
• oscuridad: opcional - color que delimita la oscuridad (por defecto negro).
• luz: opcional - color que delimita la luz (por defecto blanco).
• umbral: opcional - Un porcentaje entre 0-100% especificando la transición 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% debería resultar en texto blanco y negro. Generalmente deberías fijarlo en el valor más bajo para los colores más claros y altos para los más 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

Combinación de colores

Estas operaciones son similares a los modos de mezcla encontrados en editores de imágenes como Photoshop, Firework o GIMP, por lo que podrás usar estos métodos para hacer que tus colores CSS encajen con tus imágenes.

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 más ocuro.

Parámetros:

• color1: Un color.
• 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 más brillante.

Parámetros:

• color1: Un color.
• 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 más luminosos y los canales oscuros más oscuros. Nota: Los resultados de las condiciones están determinados por el primer color que se le pasa como parámetro.

Parámetros:

• color1: Un color con el que cubrir el otro. Tambien es el color determinante que hace que el color resultante sea mas claro o más oscuro.
• 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.

Parámetros:

• color1: Un color para suavizar la luz en el otro.
• 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.

Parámetros:

• color1: Un color para cubrir el otro.
• color2: Un color que será cubierto. También es el que determina si el color resultante es más claro o más 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 operación se realiza usando los canales RGB. El resultado es un color más oscuro.

Parámetros:

• color1: Un color que actua como minuendo.
• color2: Un color que actua como substraendo.

Salida: color

Ejemplo:

difference(#ff6600, #000000);

difference(#ff6600, #333333);

difference(#ff6600, #666666);

difference(#ff6600, #999999);

difference(#ff6600, #cccccc);

difference(#ff6600, #ffffff);

difference(#ff6600, #ff0000);

difference(#ff6600, #00ff00);

difference(#ff6600, #0000ff);

exclusion

Efecto similar a difference con un contraste más bajo.

Parámetros:

• color1: Un color que actua como minuendo.
• color2: Un color que actua como substraendo.

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 operación se realiza usando los canales RGB.

Parámetros:

• color1: Un color.
• 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 más brillante. Nota: El efecto opuesto no significa el efecto contrario al resultado a una operación de adición.

Parámetros:

• color1: Un color que actua como minuendo.
• color2: Un color que actua como substraendo.

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);