Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Jens Grochtdreis

February 25, 2014
Tweet

More Decks by Jens Grochtdreis

Other Decks in Programming

Transcript

  1. SASS
    Jens Grochtdreis

    View full-size slide

  2. Sass und Plugins testen

    View full-size slide

  3. http://sassmeister.com/

    View full-size slide

  4. Projekte organisieren

    View full-size slide

  5. „Stille Klassen“
    Werden selber nicht
    generiert.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Platzhalter vs. Mixins

    View full-size slide

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

    View full-size slide

  11. Platzhalter ans Ende

    View full-size slide

  12. oldIE vom Rest trennen

    View full-size slide

  13. Schritt 1: HTML

    View full-size slide

  14. Schritt 2: globale Variable

    View full-size slide

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

    View full-size slide

  16. Schritt 3: Nutzung der
    Variablen

    View full-size slide

  17. Abfrage im Mixin

    View full-size slide

  18. Variable im Mixin

    View full-size slide

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

    View full-size slide

  20. Im CSS direkt

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Interpolierung: #{$i}

    View full-size slide

  24. Unterschiedlich einbinden

    View full-size slide

  25. Verlauf - noch falsch

    View full-size slide

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

    View full-size slide

  27. to bottom
    Im aktuellen Compass falsch

    View full-size slide

  28. Überschriften

    View full-size slide

  29. Compass-Bildfunktion

    View full-size slide

  30. Sprites generieren lassen!

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

  33. Der Verzeichnisname

    View full-size slide

  34. diagonal smart

    View full-size slide

  35. 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 full-size slide