Sass consente di definire ed utilizzare delle variabili in cui memorizzare le informazioni migliorando la manutenzione del file CSS Un grande vantaggio che offre Sass è l’opportunità di utilizzare delle variabili in cui memorizzare delle informazioni e utilizzarla in altre parti del codice. In Sass una variabile viene definita attraverso il simbolo del dollaro ($), …
Compass è uno dei framework più utilizzati in combinazione con Sass per velocizzare lo sviluppo di file CSS Compass è un framework open-source molto utilizzato con Sass che consente di velocizzare e migliorare la qualità del codice scritto. Questo tool di sviluppo offre un gran numero di mixin già scritti, ad esempio background-image che consente …
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 …
