Embed Size (px)
Citation preview
SASSPre-processore CSS
– Dan Cederholm on A List A Part
“I was a reluctant believer in Sass. I write stylesheets by hand! I don’t need help! And I
certainly don’t want to add extra complexity to my workflow. Go away!”.
CSS IS HARD!
Ripetitivo
Frammentato
Ridondante
Disorganizzato
– DRY Principle, Andy Hunt and Dave Thomas
“Every piece of knowledge must have a single, unambiguous, authoritative representation
within a system.”
– http://sass-lang.com/
“Sass is a meta-language on top of CSS that’s used to describe the style of a document
cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements
various features that are useful for creating manageable stylesheets.”
Variabili
Annidamenti
Parziali & Importazioni
Funzioni (mixins)
Estensioni ed ereditarietà
Operazioni matematiche
gem install sass
sass --watch style.scss:style.css
SASS è utilizzabile sia via terminale…
…sia con interfacce più semplici da utilizzare!
• CodeKit - http://incident57.com/codekit/
• Compass - http://compass.kkbox.com/
• Hammer - http://hammerformac.com/
• Koala - http://koala-app.com/
• LiveReload - http://livereload.com/
• Prepros - https://prepros.io/
• Scout - http://mhs.github.io/scout-app/
Sintassi
.scss
.sass
Variabili
È un modo per salvare delle informazioni da poter riutilizzare più volte.
Le tipologie di dati che puoi utilizzare sono:
• Numeri (1,2,3);
• Stringhe di testo, con o senza apici (a, ‘b’, “c”);
• Colori (red, #FFF, rgba(230, 56, 30, .4));
• Booleani (TRUE, FALSE);
• Null;
• Liste di valori separati da spazi o virgole (30px 0, Helvetica, sans-serif).
Annidamenti
Parziali & Importazioni
Mixins
Permette di creare blocchi di codice da poter riutilizzare più volte.
Estensioni ed ereditarietà
Operazioni matematiche
