less Tutorial => Writing a for-each loop

Learn less - Writing a for-each loop. ... A for-each loop in Less has the same key components as a for loop except for the following ... Compiled CSS: Downloadless(PDF) less Gettingstartedwithless ColorOperationFunctions Extend Guards(forwritingconditionalmixins) Loops Writingasimpleforloop Writingafor-eachloop Mixins Parentselectors Variables less Gettingstartedwithless ColorOperationFunctions Extend Guards(forwritingconditionalmixins) Loops Writingasimpleforloop Writingafor-eachloop Mixins Parentselectors Variables less Loops Writingafor-eachloop Example Afor-eachloopinLesshasthesamekeycomponentsasaforloopexceptforthefollowingdifferences: Avariablewhichcontainsthelistofitemsthathastobeiteratedover. Anextract()functiontoextracteachiteminthevariablebasedontheloop'sindex. Alength()functiontocalculatethelengthofthearray(thatis,thenoofitemsinthelist)anduseitintheprimarymixincall(for[initialization]). Belowisasamplefor-eachloopwritteninLessthatiteratesthrougheachiteminthe@imagesvariable,createsa#idselectorwheretheidisthesameastheitem/imagenameandalsosetsthebackgroundimagepropertyforit. @images:cat,dog,apple,orange;/*thearraylistofitems*/ .for-each-loop(@index)when(@index>0){/*recursivemixincallwithguard-condition*/ @image:extract(@images,@index);/*extractfunctiontofetcheachitemfromthelist*/ /*thestatement*/ #@{image}{ background-image:url("http://mysite.com/@{image}.png"); } /*endofthestatement*/ .for-each-loop(@index-1);/*thenextiteration'scall-final-expression*/ } .for-loop(length(@images));/*theprimarycallwithlength()function-initialization*/ CompiledCSS: #orange{ background-image:url("http://mysite.com/orange.png"); } #apple{ background-image:url("http://mysite.com/apple.png"); } #dog{ background-image:url("http://mysite.com/dog.png"); } #cat{ background-image:url("http://mysite.com/cat.png"); } PDF-Downloadlessforfree Previous Next ThismodifiedtextisanextractoftheoriginalStackOverflowDocumentationcreatedbyfollowingcontributorsandreleasedunderCCBY-SA3.0 ThiswebsiteisnotaffiliatedwithStackOverflow SUPPORT&PARTNERS Advertisewithus Contactus PrivacyPolicy STAYCONNECTED Getmonthlyupdatesaboutnewarticles,cheatsheets,andtricks.  Subscribe