Come utilizzare le media query in Sass con la direttiva @media
Sass consente di generare nomi di selettori e proprietà dinamicamente tramite l’interpolazione. Con questa funzionalità, è possibile generare media query in modo più strutturato con le variabili. Ad esempio, definiamo due variabili:
$screen-size: 1920px;
$my-screen: "only screen and (max-width: #{$screen-size})";
$my-screen: "only screen and (max-width: #{$screen-size})";
Adesso possiamo scrivere direttamente:
@media #{$my-screen}{ ... }
In Sass, la sintassi per utilizzare l’interpolazione occorre utilizzare un cancelletto seguito da parentesi graffe (#{}) con all’interno il nome della variabile su cui operare. Il file generato sarà:
@media only screen and (max-width: 1920px) { ... }
Per maggior informazioni consultare il sito della w3schools.com.
Ecco l’elenco delle lezioni su Sass:
- Indice
- SASS: un preprocessore per generare file CSS
- Nidificare gli elementi e le proprietà
- Le variabili nei file CSS
- Le classi in Sass
- I file parziali
- Le media query
- La direttiva if
- I cicli for, each e while
- I mixin in Sass
- Differenze tra extend e include (mixin) in Sass
- Compass, un tool di sviluppo per Sass
