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.
