Voorbeeld in less

Stel, je wilt een handig grid systeem maken waarbij je aan de hand van css klassen kunt bepalen hoe breed een kolom moet zijn. Je wilt het scherm opdelen in 10 kolommen waarbij je aan de hand van css klassen steeds de breedte van een kolom wilt kunnen bepalen. Wanneer een element bijvoorbeeld de klasse w-50 krijgt dan zal dit element 50% van de schermbreedte gebruiken. <div class="w-50">Ik ben 50% breed</div>.

voorbeeld.less
1 2 3 4 5 6 7 8 9
each(range(10), {  .w-(@{value} * 10) {    height: (@value * 10%);    float:left;    padding:15px;    background-color:#e9eaeb;  } }); // De code hierboven is geschreven in less, je hoeft dit voor nu nog niet helemaal te begrijpen.

Met de 7 regels code die we hierboven schreven in less bereiken we hetzelfde als met 60 regels code in css hieronder. Uiteraard is dit nog maar een heel eenvoudig voorbeeld, LESS en SASS kunnen veel meer dan alleen loopjes maken.

output.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
.w-10 {   height: 10%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-20 {   height: 20%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-30 {   height: 30%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-40 {   height: 40%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-50 {   height: 50%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-60 {   height: 60%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-70 {   height: 70%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-80 {   height: 80%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-90 {   height: 90%;   float:left;   padding:15px;   background-color:#e9eaeb; } .w-100 {   height: 100%;   float:left;   padding:15px;   background-color:#e9eaeb; }

Navigatie

« Css genereren Voorbeeld in sass »