Recorrer arreglos en pre-processors

5/Nov/2014 45

Hace unos 4 proyectos atrás, me enfrenté al dilema de crear y recorrer un array de elementos -en este caso colores en hexacromía- y crear clases CSS dinámicamente a partir de cada uno de los colores contenidos en el arreglo. Algo sencillo de lograr en JavaScript pero que curiosamente tiene diferentes soluciones por cada tipo de pre-processor. Mientras SCSS y Stylus son más sencillos, con LESS es necesario un poco más de código para lograr lo mismo, pero que se espera se solucione en una pronta versión.

A continuación, snippets de cómo recorrer arreglos y usar sus elementos en LESS, SCSS y Stylus:

LESS


// Creamos un arreglo con 4 colores:
@colores: '#767676','#8cc079','#b35d5d','#81babd';
// Guardamos el total de elementos del arreglo:
@cuantos: length(@colores);
// Recorramos cada uno de los elementos del arreglo @colores:
.loop (@index) when (@index > 0){
  // Obtengamos el nombre de cada color
  @color: e(extract(@colores,@index));
  // Ahora podemos utilizarlo:
  elemento-@{index} {
    color: @color;
  }
  .loop (@index - 1);
}
.loop(0){}
// Seguimos recorriendo hasta llegar al total (último):
.loop(@cuantos);
// Fin

SCSS


// Creamos un arreglo con 4 colores:
$colores: (#767676, #8cc079, #b35d5d, #81babd);
// Recorramos cada uno de los elementos del arreglo @colores:
@each $color in $colores {
  // Obtengamos el índice de cada $color en $colores:
  $i: index($colores, $color);
  // Ahora podemos utilizarlo:
  elemento-#{$i} {
    color: $color;
  }
}
// Fin

Stylus


// Creamos un arreglo con 4 colores:
colores = ( #767676 #8cc079 #b35d5d #81babd )
// Guardamos el total de elementos del arreglo:
cuantos = length(colores) - 1
// Recorramos cada uno de los elementos del arreglo @colores hasta llegar al total (último):
for i in (0..cuantos)
// Ahora podemos utilizarlo:
  elemento-{i + 1}
    color colores[i]
// Fin

Comentarios

  1. Dfkklw [#]

    buy tadalafil online overnight shipping – tadalafil pill generic tadalafil online

  2. Sxznsf [#]

    tadalafil online reviews – tadalafil 10mg sildenafil vs tadalafil

  3. Xakivg [#]

    minoxidil propecia – how much does propecia cost avodart vs propecia

  4. Vldkij [#]

    crackhead propecia – propecia medication monthly cost of propecia

  5. Brijfy [#]

    does finasteride regrow hair – http://propechl.com/ topical propecia

  6. Vczaxt [#]

    propecia hair – http://propechl.com/ propecia sex

  7. Hzsoap [#]

    keeps finasteride – http://propechl.com/ finasteride amazon

  8. Qptebw [#]

    tadalafil tablets – http://xtadalafilp.com/ sildenafil vs tadalafil

  9. Hhwrze [#]

    liquid tadalafil – tadalafil 20mg in india tadalafil 20mg

  10. Ycifpp [#]

    paper writer – http://boessay.com/ academia writers

  11. Tmuhyl [#]

    Byqvgt – Brand name viagra sildenafil women

  12. Xddpdp [#]

    Chxkes – Low cost canadian viagra canada viagra

  13. HowardPoobE [#]

    singles near me free
    local personal ads

  14. HowardPoobE [#]

    senior women for sex
    milfs dating.com

  15. HowardPoobE [#]

    local personal ads
    local single

  16. HowardPoobE [#]

    free dating near you
    free adult dating sites

  17. Pakujj [#]

    Ibnuvn – a modafinil prescription Pojnur ejoize

  18. Swhlcw [#]

    Bqjvem – annotated bibliography vs literature review Rbwqcu oonupi

  19. Tivpez [#]

    Meevvb – п»їcialis sans ordonnance livraison 48h Ukdjjv xxrtqc

  20. Nnkjdp [#]

    Wnnrbq – over the counter ed pills at cvs Xfuaxv cpsdhs

  21. Lzgxsi [#]

    Yriwwh – furosempi.com Onelyw nmhmag

  22. Ssdwsj [#]

    Agrcxa – lasix furosemide 40 mg Gurujl abidml

  23. Icrcju [#]

    Dleivz – ampicillin tablets Etcazj rtpazp

  24. Gimrca [#]

    Osrzjf – generic cialis soft Xdfypy tvqlky

  25. Tugkxd [#]

    Vyhlpa – buy 5mg tadalafil Vqygfg swssyk

  26. Pykega [#]

    Cfmpsj – cheap canadian viagra pills Oixppo glhonb

  27. Hlpmxx [#]

    Gavmhd – women viagra pills Fwebnv gasxpd

  28. Qyzwde [#]

    Ckpdhc – dissertation buy Pldedh fsehoj

  29. Williamtaw [#]

    chat free dating site
    free single personal ads

  30. Nujikv [#]

    Qlrcjr – history essay writer Bcecvs ytejrn

  31. Gclswc [#]

    Tqzfty – female viagra pill where to buy Ttgkct uokrym

  32. Cwqcqv [#]

    ivermectin brand – buy stromectol stromectol 3 mg tablet

  33. Jigjxg [#]

    stromectol 3 mg tablet – stromectol 0.1 ivermectin 6 mg

  34. Dzlhmv [#]

    ivermectin australia – ivermectin 200 mcg buy stromectol online

  35. Oaykko [#]

    ivermectin 0.08% – stromectol 0.1 generic stromectol

  36. Javierexesk [#]

    tinder dating app , tinder website
    how to use tinder

  37. Gvzooq [#]

    ivermectin 0.1 uk – ivermectinep.com ivermectin uk

  38. Hkevaz [#]

    ivermectin uk coronavirus – ivermectin 3mg price stromectol tablets for humans

  39. Thlgza [#]

    ivermectin generic – ivermectin purchase stromectol oral

  40. Fozstu [#]

    stromectol oral – stromectol tab price ivermectin 3mg

  41. Woykrg [#]

    how much is plavix medication – plavix 75mg price in uk clopidogrel buy online

  42. Javierexesk [#]

    tider , how to use tinder
    http://tinderentrar.com/

  43. Tzgxcz [#]

    plavix prescription – prescription drug plavix plavix online

  44. Sfbtwd [#]

    ed pills called white panther for time size stamna – erectile dysfunction medication nih do garlic pills help ed

  45. Taoifd [#]

    ed muse pill – can you buy ed pills over the counter best drug for ed

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab