Flexbox Grid Layout con SASS e Compass: le media queries

Il nostro obiettivo è garantire la massima flessibilità alla griglia. Per questo conviene dichiarare tutte le possibili variabili in testa al documento .scss. Oltre alle variabili già viste, dichiariamo quelle che permettono di impostare tre break-point per tre diverse dimensioni dello schermo:

// Media queries
$small-screen: 800px;
$medium-screen: 1024px;
$large-screen: 1280px;

Ora basterà cambiare i valori in pixel delle prime tre variabili per modificare tutte le media query del documento.
Definiamo, poi, le variabili che stabiliscono il tipo di media query:

$screen: "only screen";
$small: "only screen and (max-width: #{$small-screen})";
$medium: "only screen and (max-width: #{$medium-screen})";
$large: "only screen and (max-width: #{$large-screen})";

Ovviamente potremmo prevedere altre possibili media query, in base, ad esempio, all'orientamento dello schermo (@media portrait o landscape), oppure al tipo di media (ad es. @media print), oltre alle diverse combinazioni delle keyword disponibili.
Una volta definite le variabili, passiamo alla costruzione delle media query. Facciamo di nuovo ricorso al mixin cells, che avevamo definito così:

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

Infine, utilizziamo le variabili definite in testa al documento e includiamo il mixin, passandogli i dovuti argomenti:

/*
 * media queries
 */
@media #{$medium}{
	@include cells(4, medium-);
}
@media #{$small}{
	@include cells(4, small-);
}

Ed ecco il codice compilato di una delle due media query:

@media only screen and (max-width: 800px) {
	/* line 17, ../sass/grid.scss */
	.small-cell-1of1 {
		-webkit-flex: 0 0 100%;
		flex: 0 0 100%;
	}
	/* line 17, ../sass/grid.scss */
	.small-cell-1of2 {
		-webkit-flex: 0 0 50%;
		flex: 0 0 50%;
	}
	/* line 17, ../sass/grid.scss */
	.small-cell-1of3 {
		-webkit-flex: 0 0 33.33333%;
		flex: 0 0 33.33333%;
	}
	/* line 17, ../sass/grid.scss */
	.small-cell-1of4 {
		-webkit-flex: 0 0 25%;
		flex: 0 0 25%;
	}
}

Già di per sé SASS fornisce un contributo enorme per lo sviluppo e la mantenibilità di progetti web. Usato, poi, insieme a librerie come Compass o Bourbon, che forniscono numerosi mixin e funzioni già pronti per l'uso, creare codice cross-browser e soprattutto mantenerlo in modo efficiente nel tempo, permette di ridurre enormemente la complessità dei progetti e le ore di lavoro da dedicare alla sistemazione di differenze nel supporto, soprattutto quando si fa uso delle nuove tecnologie di CSS3.

^C
★★★ Happy Styling! ★★★

Riferimenti

• CSS Flexbox (HTML.it)
• Guida SASS (HTML.it)
• SASS
• Compass
• Bourbon