Introduzione a SASS - Laboratorio di Web Design 2014/15

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

2015 Giovanni Buffa - CC by-nd 3.0