Senza categoria

Differenze tra extend e include (mixin) in Sass

Le direttive extend e include consentono di definire una serie di funzioni da poter riutilizzare nel codice Sass: differenze tra extend e include Tra le varie funzionalità offerta da Sass, due potrebbero generare confusione, si tratta di extend e include. La direttiva extend viene utilizzata per estendere delle classi CSS ed ereditare le proprietà della …

Differenze tra extend e include (mixin) in Sass Leggi altro »

I mixin in Sass

Creare delle “funzioni” che accettano dei parametri in ingresso tramite in mixin in Sass I mixin consentono di creare gruppi di selettori e proprietà CSS in modo da poterli riutilizzare all’interno dei fogli di stile. In Sass è possibile applicare dei parametri arbitrari sui mixin, in maniera molto simile all’invocazione di una funzione. Definiamo un …

I mixin in Sass Leggi altro »

I cicli for, each e while in Sass

Iterare in Sass con le strutture dei cicli: for, each e while Sass consente di utilizzare i cicli in modo da iterare un blocco di istruzioni. Per poter iterare un numero finito di cicli esiste la direttiva @for che genera ripetutamente set di dichiarazioni in base al valore assunto da un contatore. La sintassi per …

I cicli for, each e while in Sass Leggi altro »

La direttiva if in Sass

Sass mette a disposizione delle direttive per effettuare delle condizioni e modificare il flusso di esecuzione. La direttiva @if consente di generare un blocco di funzionalità se l’espressione della condizione è diversa da false o null. Ad esempio:     @if $myColor == blue {         color: blue;         } @else if $myColor == red {             color: red;         } …

La direttiva if in Sass Leggi altro »

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