CSS Authoring με SASS & LESS

Μια σύντομη παρουσίαση των CSS preprocessors που μπορούν να βελτιώσουν τον τρόπο που γράφουμε και διαχειριζόμαστε τη CSS. H παρουσιαση έγινε στο 1ο JoomlaFrappe Athens στις 12 Μαρτίου 2013. (http://www.joomlafrappe.gr)

Transcript

1. CSS Authoring µε SASS & LESS Πάνος Σπηλιώτης Digital media designer & developer @baronetto JoomlaFrappe
2. “I code all my CSS by hand” ιν δε µπιγκίνινγκ:
3. Rounded Corners Icon fonts Sprites Cool grid frameworks CSS Transitions Media Queries Retina ready stuff Browser specific styles Custom fonts
4. και έρχεται η ώρα που ακούς: εεε... Θέλω να κάνουµε µερικές αλλαγές στο layout, και να δοκιµάσουµε και µερικά χρωµατάκια, είναι εύκολο? “ α! και κάτι µου είπαν για ένα respons...κάτι τελοσπάντων που κάνει το site να παίζει ωραία σε κινητά. Το έχουµε? “ ...οι χρωµατισµοί στο template πρέπει να αλλάζουν δυναµικα. “
5. #facepalm
7. • Είναι µια επέκταση του CSS • Δ∆εν χρειάζεται να ξαναγράψω το CSS που έγραφα ή να µάθω µια τελείως διαφορετική γλώσσα. • Μπορώ να ξεκινήσω να χρησιµοποιώ SASS ή LESS σε ήδη υπάρχοντα project.
8. Workflow .scss ή .less  .css  Compiler Local, Server Side, Client side
9. $> gem install sass $> cd /myproject/www $> sass --watch . SASS local example εγκαθιστούµε τον compiler και τον τρέχουµε: υπάρχουν επίσης παραθυρικές εφαρµογές για mac και windows http://mhs.github.com/scout-app/ http://incident57.com/codekit/
10. styles.scss  styles.css SASS local example
11. SASS local example
12. Cool features Variables Mixins Inheritance Functions & operations Loops & Conditionals Output formatting Bracket-less syntax Nesting Includes
13. SASS Variables scss  css
14. SASS Nesting scss  css
15. SASS Mixins scss
16. SASS Mixins css
17. SASS Inheritance scss  css
18. SASS Includes & partials @import scss
19. SASS Includes & partials  Compiler _grids.scss style.scss  style.css O compiler αγνοεί τα αρχεία που αρχίζουν µε “_”
20. SASS Includes & partials style.scss
21. SASS Functions & operations scss  css http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Full function reference
22. SASS Loops & Conditionals @if @for @each @while @else @else if
23. SASS Loops & Conditionals scss
24. css SASS Loops & Conditionals
25. SASS Output formatting :nested
26. SASS Output formatting :expanded
27. SASS Output formatting :compact
28. :compressed SASS Output formatting
29. SASS Bracket-less syntax
30. SASS • Πολύ µεγάλη βιβλιοθήκη µε mixins και re-usable κώδικα • Open source • Περιέχει και τον δικό του compiler • Αυτόµατη δηµιουργία sprites http://compass-style.org Compass
31. Sass & Less on the other server side.
32. http://github.com/richtheeek/phpsass http://leafo.net/lessphp/ Server side Eκτός από τη ruby ή τη node, υπάρχουν compilers libraries για php
33. Server side lessphp
34. Sass & less on the client side
35. • SASS: Δ∆ε περιλαµβάνει client side. • Ανξάρτητο project: Sass.js https://github.com/visionmedia/sass.js/tree/ • H Less έχει native client side compiler: Less.js Client side
36. Client side Less.js
37. Υποστηρίζονται και χρησιµοποιούνται από γνωστά frameworks και εφαρµογές CSS Hat Foundation
38. Ευχαριστώ! @baronetto http://www.baronetto.net