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
   

   View Slide

2. Sass und Plugins testen
   

   View Slide

3. http://sassmeister.com/
   

   View Slide

4. View Slide

5. Projekte organisieren
   

   View Slide

6. View Slide

7. Platzhalter
   

   View Slide

8. „Stille Klassen“
   Werden selber nicht
   generiert.
   

   View Slide

9. View Slide

10. View Slide

11. http://sassmeister.com/gist/5765019
    

    View Slide

12. Reihenfolge der Platzhalter
    für die Ausgabe
    entscheidend!
    

    View Slide

13. http://sassmeister.com/gist/8902225 https://gist.github.com/jensgro/8902225
    

    View Slide

14. Platzhalter vs. Mixins
    

    View Slide

15. http://sassmeister.com/gist/8971881
    

    View Slide

16. Lösung?
    

    View Slide

17. Platzhalter ans Ende
    

    View Slide

18. oldIE vom Rest trennen
    

    View Slide

19. Schritt 1: HTML
    

    View Slide

20. HTML v1
    

    View Slide

21. HTML v2
    

    View Slide

22. Schritt 2: globale Variable
    

    View Slide

23. In den beiden SCSS-Dateien
    styles.scss oldie.scss
    

    View Slide

24. Schritt 3: Nutzung der
    Variablen
    

    View Slide

25. Abfrage im Mixin
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. Variable im Mixin
    

    View Slide

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

    View Slide

31. Im CSS direkt
    

    View Slide

32. View Slide

33. View Slide

34. @for-Loop
    

    View Slide

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

    View Slide

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

    View Slide

37. Interpolierung: #{$i}
    

    View Slide

38. View Slide

39. Compass
    

    View Slide

40. Unterschiedlich einbinden
    

    View Slide

41. View Slide

42. Verlauf - noch falsch
    

    View Slide

43. View Slide

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

    View Slide

45. to bottom
    Im aktuellen Compass falsch
    

    View Slide

46. Überschriften
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. Compass-Bildfunktion
    

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. Sprites generieren lassen!
    

    View Slide

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/
    

    View Slide

56. Name des Unterverzeichnisses
    im Standard-Bilderordner
    Aktuell nur PNGs!
    Compass überwacht den Sprites-
    Ordner und registriert Änderungen.
    

    View Slide

57. Der Verzeichnisname
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. Standard
    

    View Slide

62. diagonal smart
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

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
    

    View Slide