Aleatoriedad en LESS

10/Jul/2014 3694

Una de las muchas ventajas de los CSS pre-processors es permitir utilizar JavaScript nativamente -bueno, el pre-processor mismo está escrito en JavaScript– y con ello extender su uso antes de procesar el archivo y transformarlo en nuestro querido .css.

En este artículo mostraré varios mixins que permiten generar algún grado de aleatoriedad (random) dado cierto tipo de valor que necesites como por ejemplo, usándolos para calcular algún otro valor ya definido. Por supuesto puedes extenderlos, llevándolos a tus propias necesidades:

Número aleatorio

/* makeRandom: 
   Mixin para generar un número aleatorio
   int debe ser 0 ó 1, 1 para hacerlo entero */
.makeRandom(@min: 0, @max: @min+1, @int: 0) { 
  .checkInt() {
    @getNum: `Math.random() * (@{max} - @{min} + @{int})`;
    @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
  }
  .checkInt();
  @randNum: @base + @min;
}
/* Uso: */
.rand1 {
  .makeRandom(); /* random decimal entre 0 - 1 */
  random-number: @randNum;
}
.rand2 {
  .makeRandom(@max: 2); /* random decimal entre 0 - 2 */
  random-number: @randNum;
}
.rand3 {
  .makeRandom(10, 20, 1); /* random entero entre  10 - 20 */
  random-number: @randNum;  
}

Gist: makeRandom()

Aleatorio de un arreglo

/* Definiendo algunas variables de colores en este caso */
@blue: #009be1;
@green: #64c200;
@red: #ff1842;
@orange: #ffbf00;
@yellow: #ffd400;
/* Creando el arreglo */
@colors: '@{green}','@{blue}','@{red}','@{orange}','@{yellow}';
/* randomFromArray:
   Mixin para elegir un elemento
   aleatorio de un arreglo */
.randomFromArray(@min: 1, @max: length(@colors), @int: 0) {
  @getNum: `Math.random() * (@{max} - @{min} + @{int})`;
  @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
  @randNum: floor( @base + @min );
  @color: e( extract(@colors, @randNum) );
}
/* Uso:*/
body {
  .randomFromArray();
  background-color: @color;
}

Gist: randomFromArray()

Generador de color HEX aleatorio

/* randomColor:
   Mixin para crear aleatoriamente
   una hexacromía para color */
.randomColor(){
  @randomColor: `Math.floor(Math.random()*16777215).toString(16)`;
  @colorHex: e(@randomColor);
  @color: ~"#@{colorHex}";
}
/* Uso:*/
body {
  .randomColor();
  background-color: @color;
}

Gist: randomColor()

Comentarios

  1. ivermectin dosage [#]

    ivermectin for humans amazon http://stromectolforte.com/# ivermectin for humans where to buy buy ivermectin pills

  2. ivermectin australia [#]

    Accustomed Dope Here this outcome
    https://ivermectinstrom.com ivermectin for sale
    https://stromectolivermect.com ivermectin 3 mg
    https://ivermectinsts.com stromectol manufacturer
    https://ivermectinstrom.com ivermectin for sale
    https://stromectolivermect.com ivermectin tablets

  3. buymodalertonline [#]

    provigil vs modafinil https://modafinilok.com/

  4. pharmaceptica [#]

    hydrochlroquine https://pharmaceptica.com/

  5. bactrim antibiotic [#]

    bactrim and alcohol https://bactrimtrimoxazole.com/

  6. stromectolforte.com [#]

    ivermectin usa https://stromectolforte.com/# ivermectin for humans ivermectin oral 0 8

  7. stromectol tablets [#]

    Global Message Far this by-product
    https://ivermectinstrom.com avermectin
    https://ivermectinsts.com buy ivermectin liquid
    https://ivermectinstrom.com ivermectin for humans over the counter is
    https://ivermectinsts.com ivermectin tablets
    https://stromectolivermect.com ivermectin 1.87% humans

  8. where to buy ivermectin [#]

    generyczny stromectol http://stromectolforte.com/# ivermectin 1% ครีมทั่วไป ivermectin lice dose

  9. prednisoneforsale [#]

    prednisone taper day dose prednisone weight gain

  10. drineenxwt [#]

    isotretinoina isotretinoina

  11. ivermektin kjГёp online [#]

    buy ivermectin 6mg https://stromectolforte.com/ stromectol 6mg ivermectin

  12. stromectolforte.com [#]

    stromectol https://stromectolforte.com/ ivermectin tablets ivermectin cost at walmart

  13. stromectolforte.com [#]

    ivermectin 6 mg http://stromectolforte.com/ ivermectin tablets ivermectin 12 mg tablets for sale

  14. stromectolforte.com [#]

    hiv and aids symptoms http://stromectolforte.com – stromectol 3mg tablets price

  15. whatisprovigil [#]

    https://getmodafinilnow.com/ buy provigil

  16. bactrim coverage [#]

    bactrim ds 800 160 bactrim coverage

  17. ivermectin 3 mg tab [#]

    ivermectin 5 prix mg https://stromectolforte.com/ piguЕ‚ka stromektolowa estromectol genГ©rico

  18. stromectol [#]

    what is the point of health insurance http://stromectolforte.com – ivermectin human dosage

  19. ivermectin tablets for humans [#]

    ivermectin for humans https://stromectolforte.com/ ivermectine 1 crГЁme generiek ivermectin usa price

  20. stromectolforte.com [#]

    ivermectin for humans for sale http://stromectolforte.com/# ivermectin køb online köp ivermectin nz

  21. ivermectin uses [#]

    where do mental health patients seek care http://ivermectino.com – ivermectin uk

  22. sildenafilhim.com [#]

    treating high blood pressure http://sildenafilhim.com – sildenafil

  23. stromectolforte.com [#]

    ivermectin paste for humans http://stromectolforte.com/# ivermectin cost uk ivermectin dosage chart for humans parasites

  24. prednisoneforgout [#]

    prednisone brand name buy prednisolone tablets

  25. modafiniluses [#]

    buy modalert provigil prescription

  26. stromectolforte.com [#]

    ivermectin cost uk http://stromectolforte.com/ ivermectin for humans for sale ivermectin

  27. canine ivermectin for sale [#]

    do i need a prescription for ivermectin https://stromectolforte.com/# ivermectin tablets for humans ivermectin for sale

  28. stromectolforte.com [#]

    ivermectin over the counter canada http://stromectolforte.com/# buy ivermectin ivermectin for humans

  29. Dnyufloft [#]

    viagra e cardiopatia dilatativa viagra problГЁmes cardiaques

  30. ivermectin cena [#]

    ivermectin for sale https://stromectolforte.com/ stromectol ivermectin til salgs

  31. ivermectin 12 mg [#]

    Global Low-down Here this by-product
    https://stromectolivermect.com ivermectin 12 mg
    https://ivermectinsts.com ivermectin tablets
    https://ivermectstromect.com ivermectin tablets for sale
    https://ivermectstromect.com ivermectin for humans
    https://ivermectinst.com ivermectin for humans for sale

  32. ivermectine kopen [#]

    ivermectin tablets amazon http://stromectolforte.com/ ivermectin tablets ivermectin गोलियाँ ब्रिटेन

  33. bactrim generic name [#]

    sulfameth trimethoprim 800 160 tb bactrim for uti

  34. ivermectin [#]

    stromectol 3mg https://stromectolforte.com/# ivermectina comprar stromectol for sale

  35. cialis coupon [#]

    cialis pills cialis 20 mg

  36. ivermectin for sale [#]

    General Low-down Fro this outcome
    https://ivermectinstrom.com ivermectin tablets
    https://ivermectstromect.com ivermectin tablets for humans for sale
    https://ivermectinsts.com ivermectin 3 mg
    https://ivermectinst.com stromectol
    https://ivermectinsts.com ivermectin 3 mg

  37. ivermectin 12 mg [#]

    Accustomed Information About this product
    https://ivermectstromect.com ivermectin 3 mg
    https://ivermectinsts.com ivermectin for sale
    https://ivermectstromect.com ivermectin 12 mg
    https://ivermectinsts.com ivermectin tablets
    https://ivermectinsts.com ivermectin for human tablets

  38. ivermectin 12 mg [#]

    General Information Far this outcome
    https://ivermectinst.com ivermectin for sale
    https://ivermectstromect.com ivermectin 12 mg
    https://ivermectstromect.com ivermectin for humans
    https://stromectolivermect.com ivermectin over the counter
    https://ivermectinst.com ivermectin tablets

  39. stromectol [#]

    General Dope Far this outcome
    https://ivermectinstrom.com ivermectin tablets
    https://ivermectinsts.com ivermectin tablets
    https://ivermectinst.com ivermectin for humans
    https://ivermectinst.com ivermectin tablets for sale
    https://ivermectinsts.com ivermectin 6 mg

  40. ivermectin human tablets [#]

    Non-specific Dope About this product
    https://ivermectinst.com ivermectin 12 mg
    https://ivermectinst.com ivermectin over the counter
    https://ivermectinsts.com ivermectin for humans
    https://ivermectinsts.com ivermectin for humans
    https://stromectolivermect.com ivermectin for humans

  41. ivermectin 12 mg [#]

    Global Information Fro this offshoot
    https://ivermectinsts.com ivermectin 12 mg tablet for sale
    https://stromectolivermect.com ivermectin for humans
    https://stromectolivermect.com 3 mg ivermectine over counter
    https://ivermectinst.com ivermectin for sale humans
    https://stromectolivermect.com 12 mg ivermectin for sale

  42. ivermectin 12 mg [#]

    General Low-down Here this offshoot
    https://ivermectinst.com ivermectin 6 mg
    https://ivermectinst.com ivermectin 6 mg
    https://ivermectinsts.com ivermectin tablets for humans for sale
    https://ivermectinst.com 3 mg ivermectine over counter
    https://ivermectinstrom.com ivermectin 6 mg

  43. ivermectin tablets for sale [#]

    Global Low-down Here this by-product
    https://ivermectstromect.com ivermectin 12 mg tablet for sale
    https://ivermectinstrom.com ivermectin for sale
    https://ivermectinstrom.com ivermectin over the counter
    https://ivermectinsts.com ivermectin 3 mg
    https://ivermectinstrom.com stromectol

  44. cialis tablets [#]

    buy cialis usa cialis tablets

CSSLab