Advanced Sass

Vortrag auf dem ersten Frontend Entwickler Treffen in Wiesbaden. Diesmal sollte nicht einfach nur eine Einführung in Sass gegeben werden.

Transcript

1. SASS Jens Grochtdreis
2. Sass und Plugins testen
3. http://sassmeister.com/
5. Projekte organisieren
7. Platzhalter
8. „Stille Klassen“ Werden selber nicht generiert.
11. http://sassmeister.com/gist/5765019
12. Reihenfolge der Platzhalter für die Ausgabe entscheidend!
13. http://sassmeister.com/gist/8902225 https://gist.github.com/jensgro/8902225
14. Platzhalter vs. Mixins
15. http://sassmeister.com/gist/8971881
16. Lösung?
17. Platzhalter ans Ende
18. oldIE vom Rest trennen
19. Schritt 1: HTML
20. HTML v1
21. HTML v2
22. Schritt 2: globale Variable
23. In den beiden SCSS-Dateien styles.scss oldie.scss
24. Schritt 3: Nutzung der Variablen
25. Abfrage im Mixin
29. Variable im Mixin
30. http://sassmeister.com/gist/5765966 https://gist.github.com/jensgro/5765966
31. Im CSS direkt
34. @for-Loop
35. http://sassmeister.com/gist/9138432
36. Einfacher http://sassmeister.com/gist/9138432
37. Interpolierung: #{$i}
39. Compass
40. Unterschiedlich einbinden
42. Verlauf - noch falsch
44. veraltet! In der kommenden Version Compass 0.13 wird dies korrigiert sein.
45. to bottom Im aktuellen Compass falsch
46. Überschriften
50. Compass-Bildfunktion
54. Sprites generieren lassen!
55. In der config.rb In der styles.scss http://compass-style.org/reference/compass/utilities/sprites/base/ http://compass-style.org/help/tutorials/spriting/magic-selectors/
56. Name des Unterverzeichnisses im Standard-Bilderordner Aktuell nur PNGs! Compass überwacht den Sprites- Ordner und registriert Änderungen.
57. Der Verzeichnisname
61. Standard
62. diagonal smart
66. Jens Grochtdreis http://grochtdreis.de http://twitter.com/Flocke https://github.com/jensgro http://webkrauts.de http://slideshare.net/Flocke669 https://speakerdeck.com/flocke