Advanced Sass

Advanced Sass

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

521db10df5241d9b2b70a555cc54e9e8?s=128

Jens Grochtdreis

February 25, 2014
Tweet

Transcript

  1. SASS Jens Grochtdreis

  2. Sass und Plugins testen

  3. http://sassmeister.com/

  4. None
  5. Projekte organisieren

  6. None
  7. Platzhalter

  8. „Stille Klassen“ Werden selber nicht generiert.

  9. None
  10. None
  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

  26. None
  27. None
  28. None
  29. Variable im Mixin

  30. http://sassmeister.com/gist/5765966 https://gist.github.com/jensgro/5765966

  31. Im CSS direkt

  32. None
  33. None
  34. @for-Loop

  35. http://sassmeister.com/gist/9138432

  36. Einfacher http://sassmeister.com/gist/9138432

  37. Interpolierung: #{$i}

  38. None
  39. Compass

  40. Unterschiedlich einbinden

  41. None
  42. Verlauf - noch falsch

  43. None
  44. veraltet! In der kommenden Version Compass 0.13 wird dies korrigiert

    sein.
  45. to bottom Im aktuellen Compass falsch

  46. Überschriften

  47. None
  48. None
  49. None
  50. Compass-Bildfunktion

  51. None
  52. None
  53. None
  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

  58. None
  59. None
  60. None
  61. Standard

  62. diagonal smart

  63. None
  64. None
  65. None
  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