Guida SASS

7 dicembre 2015

Un preprocessore CSS serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS e a generare file CSS ottimizzati, aggregando le strutture definite anche in modo complesso . Esistono diversi preprocessori CSS tra cui orientarsi, la nostra scelta cade su SASS, che si distingue per completezza, stabilità, estensibilità e integrazione con gli altri componenti tipici di uno stack Web moderno.

  1. 1. SASS, introduzione e installazione
    Perché utilizzare SASS e come installare l'ambiente di sviluppo
  2. 2. Selettori nidificati
    Definire stili senza troppo codice. L'operatore (&). Proprietà con...

SassScript

  1. 3. La direttiva @extend e i placeholeder (con %)
    Passare le caratteristiche per ereditarietà tra selettori, creando...
  2. 4. I mixin
    La direttiva @mixin si avvicina al concetto di funzione per i...
  3. 5. Tipi di variabili in SASS
    Gestire le stringhe, i colori, organizzare i dati di layout e...
  4. 6. Esempi con @mixin
    Utilizzare i @mixin per realizzare effetti e piccoli accorgimenti...
  5. 7. @if, controlli condizionali in SASS
    La direttiva @if consente di generare diversi blocchi di...
  6. 8. @for, @each e @while, i cicli in SASS
    Direttive SASS per generare dichiarazioni cicliche, sfruttando...

Compass

  1. 9. Compass, sfondi multipli e gradienti
    Compass è un framework open source che offre un'ampia gamma di Mixin...
  2. 10. Compass, trasformazioni e transizioni
    I mixin di Compass per gestire transizioni e trasformazioni. Scopiamo...
  3. 11. Animazioni con Compass
    Aggiungere mixin per la gestione delle animazioni tramite plugin.

Caratteristiche avanzate

  1. 12. Media queries
    Gestire con SASS le caratteristiche responsive delle pagine: adattare...
  2. 13. La direttiva @function
    Creare funzioni per calcolare valori e modificare le proprietà in...
  3. 14. BEM, Block Element Modifier
    Alla base della metodologia BEM c'è l'idea di definire i nomi delle...
  4. 15. Trasformare in BEM un CSS esistente
    Un semplice esempio per comprendere il funzionamento della...
  5. 16. @import, parziali e StyleDocco: mettere ordine
    Dividere il foglio di stile in parziali e importarli con la direttiva...

Oltre SASS

  1. 17. Estendere SASS con Ruby
    Superare le limitazioni imposte alle funzioni dichiarate all'interno...
  2. 18. SASS e Grunt
    Automatizzare la compilazione del CSS da SASS grazie a Grunt. Per...
Se vuoi aggiornamenti su Guida SASS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Guida SASS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy