- Learn
- Flexbox, guida pratica
- Flexbox Grid Layout con SASS e Compass: i mixin
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.
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Creare un sigillo in ceralacca con Photoshop – parte 2
In questa seconda parte della guida vedremo come rifinire i dettagli interni al sigillo di ceralacca, in modo da renderlo […]