SASS GIVE SUPERPOWERS TO YOUR CSS!

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
November 20, 2014

SASS GIVE SUPERPOWERS TO YOUR CSS!

Quante volte abbiamo pensato "se potessi aggiungere una variabile che gestisce il colore del testo..." oppure "devo proprio riscrivere tutto questo codice ogni volta"
CSS non è un linguaggio di programmazione e questo lo sappiamo, ma i preprocessori ci vengono in aiuto!

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

November 20, 2014
Tweet

Transcript

  1. SASS GIVE SUPERPOWERs TO YOUR CSS!

  2. SOMETHING ABOUT ME Federico Bonomi, 25yrs old, Verona work for

    Intesys since 2008 Yesterday: Web developer / frontender Today: Ruby on Rails Developer
  3. SOMETHING ABOUT DEVS siamo TUTTI UN Pò frontenderS MA PRIMA

    ANCORA SIAMO TUTTI (O QUASI) PROGRAMMATORI
  4. SOMETHING ABOUT DEVS ogni linguaggio DI PROGRAMMAZIONE consente di definire

    Variabili e funzioni creare dei moduli eseguire delle espressioni matematiche
  5. in css no!

  6. SOMETHING ABOUT css non esistono variabili non esistono funzioni esistono

    moduli esiste OOCSS, SMACSS, DRY CSS, … MA...
  7. SOMETHING about our css code

  8. SOMETHING about our css code

  9. css non è un linguaggio di programmazione

  10. SOMETHING ABOUT css “...Ma il css è questo, non posso

    inventare niente di nuovo…”
  11. SOMETHING ABOUT css Ma non vogliamo inventare nulla di nuovo

    Vogliamo usare qualcosa che ci aiuti a produrre CSS ma con i vantaggi che abbiamo in un linguaggio di programmazione!
  12. SOMETHING ABOUT sass Sass is the most mature, stable, and

    powerful professional grade CSS extension language in the world
  13. SOMETHING ABOUT sass SASS è un pre-processore. La sua sintassi

    è molto simile al CSS. Il codice SASS, una volta compilato, produce codice CSS
  14. SOMETHING ABOUT sass 1) Variables 2) Nesting 3) Partials 4)

    Import 5) Mixins 6) Extends / Inheritance 7) Operators
  15. SOMETHING ABOUT sass and scss Prima di iniziare è importante

    sapere che in SASS le parentesi graffe e i punti e vigola spariscono Inoltre l’indentazione è fondamentale per la compilazione
  16. Variables In SASS le variabili vengono definite come in php

    ovvero precedute dal carattere $
  17. Variables

  18. nesting Quando scriviamo codice html scriviamo del codice nidificato In

    CSS questo non è possibile Quando vogliamo applicare stili a elementi nidificati scriviamo catene di selettori molto lunghe
  19. nesting

  20. partials I partial (parziali) sono a tutti gli effetti file

    contenenti porzioni di codice SASS Questo ci permette di organizzare al meglio il nostro codice SASS e cercare di modularizzare più possibile
  21. partials I file partials vengono denominati con un underscore davanti

    ad esempio _reset.sass
  22. IMPORT In CSS l’import corrisponde ad una chiamata http. In

    sass import serve per includere un file sass, che potrebbe essere un partial, senza generare una chiamata http.
  23. IMPORT

  24. IMPORT

  25. mixins Alcune cose da scrivere in css sono noiose, soprattutto

    in css3 ad esempio le direttive per ogni browser Un mixin è a tutti gli effetti una funzione.
  26. mixins

  27. mixins

  28. Extends / Inheritance Questa è una delle caratteristiche più usate.

    Aiuta a tenere il nostro codice CSS ancora più compatto.
  29. Extends / Inheritance

  30. operators Sass ha una serie di operatori come +, -,

    *, %. Nell’esempio successivo andremo a creare una griglia fluida
  31. operators

  32. sass lists Le sass lists corrispondono ad un array semplice.

    Potremmo paragonarla a: PHP: array(1, 2, 3); JS: new Array(1, 2, 3);
  33. sass lists Le liste possono essere definite separate da spazi

    o da punti e virgola
  34. sass lists importante il primo elemento non si trova in

    posizione 0 ma in posizione 1
  35. sass lists . read nth($list, $index) ritorna l’elemento in posizione

    $index all’interno di $list length($list) ritorna il numero di elementi index($list, $value) ritorna all’interno di $list il primo indice trovato all’interno di $value
  36. sass lists . edit append($list, $value) appende $value alla fine

    di $list join($list-1, $list-2) appende $list-1 a $list-2 reject($list, $value) rimuove $value da $list
  37. sass lists . print

  38. sass maps Le sass maps corrispondono ad un array associativo

    Sass maps è quindi un array chiave valore
  39. sass maps

  40. sass maps

  41. sass install sass è una gemma di ruby

  42. sass install Una volta installato ruby procediamo a installare sass

    con un semplice comando Per verificare se effettivamente installato:
  43. sass compile per compilare lanciamo: volendo utilizziamo watch che ri-compila

    ad ogni modifica di un file
  44. sass compile for all

  45. preprocessor battle

  46. sass vs less Framework e librerie più mature (Bourbon, Compass)

    Built-in watchers sintassi più “sintetica”
  47. sass vs stylus single editing style ci sono due sintassi,

    esclusive fra loro non si possono mescolare gli stili
  48. sass vs less vs stylus variables

  49. sass vs less vs stylus reference selector

  50. sass vs less vs stylus mixins

  51. sass vs less vs stylus extend

  52. sass vs less vs stylus color function

  53. my story il più grande scoglio è l’installazione/configurazione sass è

    un linguaggio molto simile a ciò che già conosciamo l’importante è avere un approccio graduale
  54. my story > Iniziamo con un file unico e a

    evitare parentesi e punti e virgola > proseguiamo iniziando ad usare delle variabili > innestiamo il codice > spostiamo il codice da un file unico a più file organizzati > Scriviamo qualche mixins e riutilizziamolo > Usiamo la potenza dell’ extend > divertiamoci con liste, mappe, controlli condizionali, iteratori, ...
  55. my story . folder structure definire una struttura logica di

    base che può essere rispettata o estesa per ogni progetto indipendentemente dalla finalità di quest’ultimo.
  56. my story . folder structure > >

  57. my story . folder structure . bootstrap > >

  58. None