Le media query in Sass

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})";

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:

Pubblicato in CSS, Front-end, JavaScript, Programmazione, Sass, Senza categoria Taggato con: ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*