CSS Authoring με SASS & LESS

CSS Authoring με SASS & LESS

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

1233effa0ff4974d5a4335ac408be5d3?s=128

Panos Spiliotis

March 12, 2013
Tweet

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

  6. None
  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