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 …
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 …
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; } …
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})”;
Suddividere le regole di stile in più file ed importarli in un unico file tramite la import Spesso i file CSS sono molto lunghi, definire tutte le regole di stile in un unico file rende la lettura e la manutenzione del file CSS difficile… per questo motivo Sass ha pensato introdurre la possibilità di suddividere …
Ottimizzare la scrittura dei fogli di stile tramite Sass SASS è un preprocessore CSS che consente di generare dei fogli di stile utilizzando funzionalità non possibili nei fogli CSS normali. Acronimo di Syntactically Awesome Stylesheets, offre una serie di vantaggi come l’utilizzo di variabili, cicli e la possibilità di nidificare gli elementi che consentono di …
Indice delle lezioni su Sass: 1. SASS: un preprocessore per generare file CSS 2. Nidificare gli elementi e le proprietà 3. Le variabili nei file CSS 4. Le classi in Sass 5. I file parziali 6. Le media query 7. La direttiva if 8. I cicli for, each e while 9. I mixin in Sass …
