Ciao a tutti, sto cercando di realizzare una griglia semplice utilizzando le peculirità di less, ho trovato molte info sulla rete ed ho realizzato questo semplice layout:

parte html all'interno del body:
codice:
<div class="wrapper">
	
	<div class="box full">box full</div>
	
	
	<div class="box half">box half</div>
	<div class="box half">box half</div>
	
	
	<div class="box third">box third</div>
	<div class="box third">box third</div>
	<div class="box third">box third</div>
	
	
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	<div class="box forth">box forth</div>
	
	
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	<div class="box five">box five</div>
	
        <div class="clearLeft"></div>
	</div>
parte less
codice:
// color
@backgroundColor:#FFF;
@mainColor: #333333;
@secondColor: #66bbe3;
@mainTextColor: lighten(@mainColor, 5%);
@headingColor: lighten(@mainColor, 100%);

// bordo

@colorBorder: #000;
@sizeBorder: 1px;
@styleBorder: solid;

// grid

/* larghezza colonna singola */

@columnWidth:60px;
@gutterWidth:10px;
@columnNumber:12; /* numero delle colonne da utilizzare */

/* larghezza totale delle colonne e del canaletto */
@columnWidthFull: @columnWidth * @columnNumber;
@gutterWidthFull: (@gutterWidth * @columnNumber) *2;
@fullWidth: @columnWidthFull+@gutterWidthFull;
.clearLeft{
	clear:left;
}
body{
	background-color:@backgroundColor;
	color:@mainTextColor;
		background:url(../images/grid.png) repeat-y center top;
	h1{
		color:@headingColor;
	}
	.box{
		/*border: @colorBorder @sizeBorder @styleBorder;*/
		float:left;
		min-height:100px;
	}
}
.wrapper{
		width:@fullWidth;
		margin:0 auto;
	}
.full{
	width:@fullWidth;
	background-color: lighten(@secondColor, 5%);
}
.half{
	width:@fullWidth/2;
	background-color: lighten(@secondColor, 10%);
}
.third{
	width:@fullWidth/3;
	background-color: lighten(@secondColor, 15%);
}
.forth{
	width:@fullWidth/4;
	background-color: lighten(@secondColor, 20%);
	}
.five{
	width:@fullWidth/5;
	color: lighten(@mainColor, 90%);
	background-color: lighten(spin(@mainColor, 8), 25%);
}
Fin qui tutto funziona bene, adesso vorrei inserire del margin, che sarebbe @gutterWidth, tra i box, ma qui la faccenda si complica un po, per me che non capisco nulla di programmazione, perché la larghezza dei box è data dalla variabile @fullWidth diviso quanti box si vogliono, ma quando voglio inserire il margine dato dalla variabile: @gutterWidthFull, il layout mi si incasina.
Ci vorrebbe un'espressione/funzione che calcola la larghezza totale delle colonne, del gutter sottraendo quello in eccesso ecc...
Insomma

Posto il link di riferimento:
link

Quest'altro
link
invece lo sto leggendo adesso e parla della semantica che al primo link manca, da qui la decisione di modificarlo leggermente.

Spero in un vostro aiuto, ciao