43-mal heruntergeladen
Hochgeladen vonMartin Huber
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Das Dokument behandelt die Verwendung von Sass/SCSS und Compass zur effektiveren Erstellung von CSS für TYPO3-Projekte. Es erklärt die Vorteile wie zentrale Definitionen, Wiederverwendbarkeit von Eigenschaften, sowie die Optimierungen durch Compiler und Funktionen wie Variablen, Nesting und Mixins. Zudem werden Installation, Kompilierung und nützliche Compass-Funktionen zur Unterstützung von CSS3 und zur Vereinfachung des Entwicklungsprozesses beschrieben.
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
- 1. Wir leben TYPO3 CSS effektiver schreiben Sass/SCSS und Compass Wir leben TYPO3 in2code.de
- 2. Was machen diebei in2code Wir unterstützen TYPO3-, Internet- und Full-Service Agenturen genauso wie große und mittelgroße Firmen, die auf TYPO3 Spezialwissen angewiesen sind. Wir leben TYPO3 in2code.de
- 3. Was ist Sass und SCSS Wir leben TYPO3 in2code.de
- 4. Bedeutung und Funktion •Metasprache zum Kompilieren von CSS • existiert seit 2007 • bedeutet „Syntactically Awesome Stylesheets“ • SCSS (Sassy CSS = freches CSS) wird ab Sass 3.0 unterstützt und basiert auf CSS3 • Sass/SCSS wird mit dem HAML-Compiler (Werkzeug in Ruby geschrieben) in CSS gewandelt • Kostenlos, unter www.sass-lang.com gibt’s mehr Wir leben TYPO3 in2code.de
- 5. Warum Sass und SCSS Wir leben TYPO3 in2code.de
- 6. Nachteile von normalemCSS • CSS kann schnell unübersichtlich werden: • Eigenschaften wiederholen sich häufig • CSS wird oft doppelt geschrieben • CSS umständlich bei einer globalen Änderung • keine einheitliche Formatierung • Performanceeinbußen bei Importen Wir leben TYPO3 in2code.de
- 7. Vorteile von Sass/SCSS •grundsätzliche Wert können zentral definiert werden • SASS kann rechnen (z.B. Farben, Größen und Abstände) • einmal eingetragene Eigenschaften können immer wieder benutzt werden • Compiler optimiert das generierte CSS • Compiler prüft auf korrekte Syntax, erkennt Schreibfehler • Importe ohne Performanceeinbußen • übersichtlichere, einheitliche Schreibweise Wir leben TYPO3 in2code.de
- 8. Unterschiede Sass/SCSS Wir leben TYPO3 in2code.de
- 9. SASS • klassische Syntax,Focus auf Minimalisierung • verzichtet auf Klammern • benötigt keine Semikolon • arbeitet mit Einrückungen (immer 4 Leerzeichen, keine Tabs) Wir leben TYPO3 in2code.de
- 10. SCSS • Schreibweise basiertauf normalen CSS • verwendet Klammern und Semikolon • normales CSS kann einfach einkopiert werden Wir leben TYPO3 in2code.de
- 11. Hinweis In einem Projektkann man Sass und SCSS auch gemischt verwenden! Wir leben TYPO3 in2code.de
- 12. So geht’s! Wir lebenTYPO3 in2code.de
- 13. Installation 1. Ruby undHAML installieren Windows: http://rubyinstaller.org/downloads/ OSX: schon installiert 2. Sass-Unterstützung von HAML installieren Ruby-Konsole (Windows) bzw. Terminal (OSX) öffnen gem install sass (Windows) bzw. sudo gem install sass (OSX) Wir leben TYPO3 in2code.de
- 14. Compilieren 3. Um eineDatei zu kompilieren in der Ruby- Konsole/Terminal in das Verzeichnis wechseln und die Überwachung starten mit sass --watch dateiname.scss:dateiname.css 4. Ganze Verzeichnisse können auch überwacht werden: sass --watch ordername/scss:ordnername/css Unter Windows mit anstatt / arbeiten! Wir leben TYPO3 in2code.de
- 15. Compilieren Optionen: Mit der Option--style kann man die CSS Datei auch compressed oder compact kompilieren lassen. Wir leben TYPO3 in2code.de
- 16. Was kann es: Variablen Wir leben TYPO3 in2code.de
- 17. Variablen können definiert undprojektweit verwendet werden, z.B. • Farben • Größen • Abstände • Fonts • usw. Wir leben TYPO3 in2code.de
- 18. Was kann es: Nesting Wir leben TYPO3 in2code.de
- 19. • Übersichtliche Strukturierungdurch Einrückung und Verschachtelung von Tags, IDs und Klassen • Linkattribute (hover usw.) lassen sich innerhalb des SCSS referenzieren Wir leben TYPO3 in2code.de
- 20. SCSS wird zu CSS: Wir leben TYPO3 in2code.de
- 21. • Sehr praktisch:Mediaqueries direkt in der entsprechenden Klasse schreiben SCSS wird zu CSS: Wir leben TYPO3 in2code.de
- 22. Was kann es: Selektoren kombinieren Wir leben TYPO3 in2code.de
- 23. Alle bekannten CSS-Selektorenkönnen verwendet werden! Z.B. > ~ + usw. Platzhalterfunktion durch & (Ampersand) Dieses holt den Elternselektor in den aktuellen Selektor. Wir leben TYPO3 in2code.de
- 24. SCSS wird zu CSS: Wir leben TYPO3 in2code.de
- 25. Was kann es: Rechnen Wir leben TYPO3 in2code.de
- 26. SCSS • einfache mathematische Rechnungen • Farben können berechnet werden wird zu CSS: Wir leben TYPO3 in2code.de
- 27. Weiter Funktionen zurFarbberechnung • Farben mischen mit mix • Sättigung ändern mit saturate • Transparenz mit transparentize berechnen • u.v.m Alle Funktionen unter http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html Wir leben TYPO3 in2code.de
- 28. Was kann es: @extend Wir leben TYPO3 in2code.de
- 29. SCSS Komplette Definitionen von Selektorenkönnen in neue Selektoren vererbt werden. ACHTUNG: Auch Eigenschaften von Nested-Elementen werden wird zu CSS: mitvererbt. Deshalb immer nur eine Regel vererben! Wir leben TYPO3 in2code.de
- 30. Was kann es: @mixin und @include Wir leben TYPO3 in2code.de
- 31. SCSS wiederkehrende Angaben können mit @mixindefiniert und mit @include immer wieder verwendet werden (sinnvoll für Standard- wird zu CSS: formatierungen z.B. runde Ecken)… Wir leben TYPO3 in2code.de
- 32. SCSS … zusätzlich können auchhier Variablen definiert werden um z.B. die gerundeten Ecken flexibler zu wird zu CSS: gestalten Wir leben TYPO3 in2code.de
- 33. ACHTUNG: Die Vendor-Prefixes für border-radiussind veraltet! Die Angabe border-radius alleine reicht auch! Wir leben TYPO3 in2code.de
- 34. Was kann es: @import Wir leben TYPO3 in2code.de
- 35. Gegen über @importin CSS werden importierte Dateien mit in die Datei „einkompiliert“! Dadurch keine Performanceeinbußen wie in CSS durch zusätzliche HTTP-Referrers. Mit @import in Sass kann ein Projekt optimial strukturiert werden. Wir leben TYPO3 in2code.de
- 36. Echte Imports mit@import • wiederkehrende Angaben/Variablen können in eigene Datei gespeichert werden • Aufsplittung in kleine „Bereiche“ mit sinnvoller Benennung @import „dateiname“; Importiert den Inhalt angegebenen Datei beim Kompilieren an dieser Stelle. Wir leben TYPO3 in2code.de
- 37. Strukturierung mit @import Hinweis: Dateienmit Unterstrich werden vom Compiler nicht konvertiert. Sinnvoll bei Dateien, die mit @import beim Kompilieren inkludiert werden. Wir leben TYPO3 in2code.de
- 38. Strukturierung mit @import Inhaltder Datei questclub.scss Wir leben TYPO3 in2code.de
- 39. Strukturierung mit @import Wirdkompiliert zu: Wir leben TYPO3 in2code.de
- 40. Was kann es: @if und @else Wir leben TYPO3 in2code.de
- 41. CSS wird abhängigvon einer Variable erzeugt SCSS wird zu CSS: Wir leben TYPO3 in2code.de
- 42. Was kann es: @for Wir leben TYPO3 in2code.de
- 43. Berechnungen durch eineFOR-Schleife (z.B. Überschriften) SCSS wird zu CSS: Wir leben TYPO3 in2code.de
- 44. Was kann es: @each Wir leben TYPO3 in2code.de
- 45. SCSS Berechnungen durch eine EACH-Schleife wird zu CSS: Wir leben TYPO3 in2code.de
- 46. Was kann es: @function und @return Wir leben TYPO3 in2code.de
- 47. SCSS Eigene Funktionen können mit @functionund @return geschrieben wird zu CSS: werden. Verrückte Spielereien mit Funktionen und Schatten unter: http://sassymothereffingtextshadow.com/ Wir leben TYPO3 in2code.de
- 48. Was kann es: Kommentarfunktionen Wir leben TYPO3 in2code.de
- 49. SCSS Es gibt zweiArten von Kommentaren: • Globale Kommentare /* */ (werden auch ins CSS geschrieben) wird zu CSS: • Interne Kommentar // (werden nicht ins CSS kompiliert) Wir leben TYPO3 in2code.de
- 50. Debugging Wir leben TYPO3 in2code.de
- 51. Rückmeldung bei einemFehler • in der Ruby-Konsole beim Konvertieren • beim Reload der HTML- Seite am Seitenbeginn (da in CSS-Datei) Wir leben TYPO3 in2code.de
- 52. Was ist Compass Wir leben TYPO3 in2code.de
- 53. Compass erweitert Sass Compassist ein Framework für Sass. Es erweitert Sass um etliche CSS3 Funktionen und nützliche CSS Features. Beispiele: • Einfachste Anwendung von Sprites • CSS3 für alle Browser in einer Zeile Wir leben TYPO3 in2code.de
- 54. So geht’s! Wir lebenTYPO3 in2code.de
- 55. Installation von Compass Sassmuss installiert sein (aber das haben wir schon) Ruby-Konsole (Windows) bzw. Terminal (OSX) öffnen gem install compass (Windows) bzw. sudo gem install compass (OSX) Fertig! Wir leben TYPO3 in2code.de
- 56. Neues Projekt anlegen compasscreate <projektname> Legt ein neues Projekt an. Compass erstellt folgende Struktur: Wir leben TYPO3 in2code.de
- 57. Projekt konfigurieren Die config.rbist die Konfigurationsdatei für Compass. Wir leben TYPO3 in2code.de
- 58. Meine Konfiguration Wir lebenTYPO3 in2code.de
- 59. Compass in Sassimportieren Das es sich bei Compass um „Sass-Mixins“ handelt, müssen wir diese zuerst in unseren Sass-Dateien importieren um die Funktionen nutzen zu können: @import „compass“ Hier werden alle Compass-Funktionen importiert. @import „compass/css3“ Importiert z.B. nur die CSS3-Mixins Wir leben TYPO3 in2code.de
- 60. Compass nutzen Grundsätzlich werdenCompass-Mixins mit @include <mixin-name> innerhalb eines Selektors in der Sass-Datei aufgerufen. Alle „Features“ gibt es unter. http://compass-style.org/reference/compass/ Wir leben TYPO3 in2code.de
- 61. Cross-Browser Support konfigurieren DasVerhalten von Compass kann beeinflussen. Z.B: $experimental-support-for-svg: true; innerhalb einer Sass-Datei eines Projekts aktiviert das Generieren von SVG-Hintergründen für IE, der keinen Background-Gradient kann. Alle „Features“ gibt es unter: http://compass-style.org/reference/compass/support/ Wir leben TYPO3 in2code.de
- 62. Die coolsten Features: CSS3 Mixins Wir leben TYPO3 in2code.de
- 63. Beispiel: Text-Shadow undBackground-Gradient SCSS Online-Demo: http://codepen.io/Huaba/full/LiqJe Wir leben TYPO3 in2code.de
- 64. Beispiel: Text-Shadow undBackground-Gradient wird zu CSS: Online-Demo: http://codepen.io/Huaba/full/LiqJe Wir leben TYPO3 in2code.de
- 65. Beispiel: Text-Shadow undBackground-Gradient Sieht dann so aus: Online-Demo: http://codepen.io/Huaba/full/LiqJe Wir leben TYPO3 in2code.de
- 66. Alle CSS3 Mixinsfindet man unter: http://compass- style.org/reference/compass/ css3/ Wir leben TYPO3 in2code.de
- 67. Die coolsten Features: Link-Colors Wir leben TYPO3 in2code.de
- 68. SCSS In Compass kann man wird zu CSS: Linkfarben in einer einzigen Zeile angeben: Online-Demo: http://codepen.io/Huaba/full/ojHFv Wir leben TYPO3 in2code.de
- 69. Die coolsten Features: Helpers Wir leben TYPO3 in2code.de
- 70. Image URL Anstatt urlkann man Compass die Pfade mit image-url anpassen lassen. Somit können später Verzeichnisse problemlos umbenannt werden. SCSS wird zu CSS: Wir leben TYPO3 in2code.de
- 71. Image Dimension Helpers Mitimage-height und image-width können die Höhe und Breite von Bildern ausgelesen werden. Mit inline-image(„bildname.png“) kann man Bilder auch als Inlinebilder berechnen lassen. Wir leben TYPO3 in2code.de
- 72. Image Dimension Helpers SCSS wirdzu CSS: Wir leben TYPO3 in2code.de
- 73. Image Dimension Helpers Dateienim System: Sieht dann so aus: vdr.jpg speaker.png Wir leben TYPO3 in2code.de
- 74. Die coolsten Features: Sprites – i love it Wir leben TYPO3 in2code.de
- 75. Basic Usage Dateien imProjekt Hiermit wird die Spritemap und die dazugehörigen CSS-Klassen automatisch erzeugt. SCSS Wir leben TYPO3 in2code.de
- 76. Basic Usage wird zuCSS: …und diesem Sprite: Wir leben TYPO3 in2code.de
- 77. Basic Usage Nun könnendie erzeugten Klassen bei Bedarf erweitert werden und im HTML-Markup verwendet werden: <p class=„icons-first“>Zum Anfang</p> Sieht dann so aus: Wir leben TYPO3 in2code.de
- 78. Selector Control Im SCSSkönnen die Sprites ebenso in eigenen Klassen verwendet werden: .zum-anfang { @include icons-sprite(first); } Sieht dann so aus: Wir leben TYPO3 in2code.de
- 79. Selector Control Falls manein einziges Sprite verschieben/korrigieren muss (nicht die ganze Map!): .zum-anfang { @include icons-sprite(first,false,10,0); Bildname geben Breite+Höhe des Sprites der Klasse X-Versatz Y-Versatz } Sieht dann so aus: Wir leben TYPO3 in2code.de
- 80. Magic Selector Dateien imProjekt Hiermit werden Spritemaps und CSS inklusive der jeweiligen Zustände für hover, active usw. erzeugt. SCSS Erkannt werden diese anhand der Dateinamen. Wir leben TYPO3 in2code.de
- 81. Magic Selector wird zuCSS: …und diesem Sprite: Wir leben TYPO3 in2code.de
- 82. Sprites konfigurieren Einige Einstellmöglichkeiten: $<map>-spacing //Abstände in px um die Sprites $<map>-<sprite>-spacing //Abstände um ein best. Sprites $<map>-layout //Layout der Map: horizontal, diagonal oder smart ist möglich Mehr Optionen unter: http://compass-style.org/help/tutorials/spriting/customization-options/ Wir leben TYPO3 in2code.de
- 83. Compass erweitern Wir lebenTYPO3 in2code.de
- 84. Compass mit Pluginserweitern Compass kann mit Plugins erweitert werden! Viele Plugins unter: http://bit.ly/fAzE7b Ein Beispiel: RGBAPNG-Plugin: https://github.com/aaronrussell/compass-rgbapng Dieses Plugin bringt Cross-Browser Support für RGBA. Wir leben TYPO3 in2code.de
- 85. Compass mit Pluginserweitern Installation mit: gem install compass-rgbapng Auf Mac: sudo gem install compass-rgbapng Anschließend in der config.rb hinzufügen: require „rgbapng“ Verwendung im SCSS mit Wir leben TYPO3 in2code.de
- 86. Compass mit Pluginserweitern Erzeugt dieses CSS: Und dies im Dateisystem: Wir leben TYPO3 in2code.de
- 87. Links Wir leben TYPO3 in2code.de
- 88. Weitere Hilfe imNetz Sass: http://www.sass-lang.com Sass Examples: http://thesassway.com Compass: http://www.compass-style.org Plugins für Compass: http://bit.ly/fAzE7b Rubyinstaller für Windows: http://www.rubyinstaller.org Wir leben TYPO3 in2code.de
- 89. Und? Nicht cool? Fragen? Dann Happy Styling Martin Huber Wir leben TYPO3 in2code.de