Flexbox Grid Layout con SASS e Compass: i mixin

Ora la parte più interessante: creiamo i nostri mixin. Torniamo all’inizio del file .scss e scriviamo:

@mixin cells($num-cells, $dim:''){
	@for $i from 0 to $num-cells{
		.#{$dim}cell-1of#{$i + 1}{
			@include flex(0 0 100%/($i + 1));
		}
	}
}

Il mixin cells accetta due argomenti: il primo è il numero di celle che possono comporre la nostra griglia, il secondo è una stringa di testo. Il mixin viene incluso nel codice con la seguente istruzione:

/* cell dimensions */
@include cells(6);

Il valore 6 passato come argomento viene utilizzato per stabilire il numero di iterazioni del ciclo for. Ad ogni iterazione, viene generata una dichiarazione in cui il nome del selettore di classe è composto dal punto, dal prefisso $dim, dalla stringa cell-1of e dal valore corrente di $i + 1.

La proprietà viene generata dal mixin flex, in cui il terzo valore è ottenuto dal rapporto tra 100% e $i + 1.

Il codice compilato è il seguente:

/* cell dimensions */
/* line 17, ../sass/grid.scss */
.cell-1of1 {
	-webkit-flex: 0 0 100%;
	flex: 0 0 100%;
}
/* line 17, ../sass/grid.scss */
.cell-1of2 {
	-webkit-flex: 0 0 50%;
	flex: 0 0 50%;
}
/* line 17, ../sass/grid.scss */
.cell-1of3 {
	-webkit-flex: 0 0 33.33333%;
	flex: 0 0 33.33333%;
}
/* line 17, ../sass/grid.scss */
.cell-1of4 {
	-webkit-flex: 0 0 25%;
	flex: 0 0 25%;
}
/* line 17, ../sass/grid.scss */
.cell-1of5 {
	-webkit-flex: 0 0 20%;
	flex: 0 0 20%;
}
/* line 17, ../sass/grid.scss */
.cell-1of6 {
	-webkit-flex: 0 0 16.66667%;
	flex: 0 0 16.66667%;
}

Lo stesso procedimento può essere utilizzato per altri blocchi di dichiarazioni, come in questo secondo esempio:

@mixin priority($levels){
	@for $i from 1 to $levels{
		.priority-#{$i - 1}{
			@include order(#{$i - 1});
		}
	}
}

L’output del mixin viene ottenuto dalla seguente istruzione:

/* 
 * cell order
 */
@include priority(6);

Il codice CSS risultante sarà il seguente:

/* 
 * cell order
 */
/* line 25, ../sass/grid.scss */
.priority-0 {
	-webkit-order: 0;
	order: 0;
}
/* line 25, ../sass/grid.scss */
.priority-1 {
	-webkit-order: 1;
	order: 1;
}
/* line 25, ../sass/grid.scss */
.priority-2 {
	-webkit-order: 2;
	order: 2;
}
/* line 25, ../sass/grid.scss */
.priority-3 {
	-webkit-order: 3;
	order: 3;
}
/* line 25, ../sass/grid.scss */
.priority-4 {
	-webkit-order: 4;
	order: 4;
}

Ad ogni iterazione viene generato un blocco di dichiarazioni. Per cambiare la struttura del foglio di stile, basterà cambiare il valore degli argomenti dei mixin.