SASS GIVE SUPERPOWERS TO YOUR CSS!

by FEVR

Slide 1

Slide 1 text

SASS GIVE SUPERPOWERs TO YOUR CSS!

Slide 2

Slide 2 text

SOMETHING ABOUT ME Federico Bonomi, 25yrs old, Verona work for Intesys since 2008 Yesterday: Web developer / frontender Today: Ruby on Rails Developer

Slide 3

Slide 3 text

SOMETHING ABOUT DEVS siamo TUTTI UN Pò frontenderS MA PRIMA ANCORA SIAMO TUTTI (O QUASI) PROGRAMMATORI

Slide 4

Slide 4 text

SOMETHING ABOUT DEVS ogni linguaggio DI PROGRAMMAZIONE consente di definire Variabili e funzioni creare dei moduli eseguire delle espressioni matematiche

Slide 5

Slide 5 text

in css no!

Slide 6

Slide 6 text

SOMETHING ABOUT css non esistono variabili non esistono funzioni esistono moduli esiste OOCSS, SMACSS, DRY CSS, … MA...

Slide 7

Slide 7 text

SOMETHING about our css code

Slide 8

Slide 8 text

SOMETHING about our css code

Slide 9

Slide 9 text

css non è un linguaggio di programmazione

Slide 10

Slide 10 text

SOMETHING ABOUT css “...Ma il css è questo, non posso inventare niente di nuovo…”

Slide 11

Slide 11 text

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!

Slide 12

Slide 12 text

SOMETHING ABOUT sass Sass is the most mature, stable, and powerful professional grade CSS extension language in the world

Slide 13

Slide 13 text

SOMETHING ABOUT sass SASS è un pre-processore. La sua sintassi è molto simile al CSS. Il codice SASS, una volta compilato, produce codice CSS

Slide 14

Slide 14 text

SOMETHING ABOUT sass 1) Variables 2) Nesting 3) Partials 4) Import 5) Mixins 6) Extends / Inheritance 7) Operators

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Variables In SASS le variabili vengono definite come in php ovvero precedute dal carattere $

Slide 17

Slide 17 text

Variables

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

nesting

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

partials I file partials vengono denominati con un underscore davanti ad esempio _reset.sass

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

IMPORT

Slide 24

Slide 24 text

IMPORT

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

mixins

Slide 27

Slide 27 text

mixins

Slide 28

Slide 28 text

Extends / Inheritance Questa è una delle caratteristiche più usate. Aiuta a tenere il nostro codice CSS ancora più compatto.

Slide 29

Slide 29 text

Extends / Inheritance

Slide 30

Slide 30 text

operators Sass ha una serie di operatori come +, -, *, %. Nell’esempio successivo andremo a creare una griglia fluida

Slide 31

Slide 31 text

operators

Slide 32

Slide 32 text

sass lists Le sass lists corrispondono ad un array semplice. Potremmo paragonarla a: PHP: array(1, 2, 3); JS: new Array(1, 2, 3);

Slide 33

Slide 33 text

sass lists Le liste possono essere definite separate da spazi o da punti e virgola

Slide 34

Slide 34 text

sass lists importante il primo elemento non si trova in posizione 0 ma in posizione 1

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

sass lists . print

Slide 38

Slide 38 text

sass maps Le sass maps corrispondono ad un array associativo Sass maps è quindi un array chiave valore

Slide 39

Slide 39 text

sass maps

Slide 40

Slide 40 text

sass maps

Slide 41

Slide 41 text

sass install sass è una gemma di ruby

Slide 42

Slide 42 text

sass install Una volta installato ruby procediamo a installare sass con un semplice comando Per verificare se effettivamente installato:

Slide 43

Slide 43 text

sass compile per compilare lanciamo: volendo utilizziamo watch che ri-compila ad ogni modifica di un file

Slide 44

Slide 44 text

sass compile for all

Slide 45

Slide 45 text

preprocessor battle

Slide 46

Slide 46 text

sass vs less Framework e librerie più mature (Bourbon, Compass) Built-in watchers sintassi più “sintetica”

Slide 47

Slide 47 text

sass vs stylus single editing style ci sono due sintassi, esclusive fra loro non si possono mescolare gli stili

Slide 48

Slide 48 text

sass vs less vs stylus variables

Slide 49

Slide 49 text

sass vs less vs stylus reference selector

Slide 50

Slide 50 text

sass vs less vs stylus mixins

Slide 51

Slide 51 text

sass vs less vs stylus extend

Slide 52

Slide 52 text

sass vs less vs stylus color function

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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, ...

Slide 55

Slide 55 text

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.