SASS und SCSS	CSS effektiv schreiben<br />
Was machen die bei in2code?<br />Stefan Busemann<br />David Richter<br />Workshops<br />Markus Rodler<br />TYPO3<br />Tina...
Was ist SASS/SCSS<br />Bedeutung und Funktion<br /><ul><li> SASS ist eine Metasprache zum Kompilieren von CSS
 bedeutet „SyntacticallyAwesome Stylesheets“
 existiert seit 2007
 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</li></li></ul><li>Warum SASS/SCSS<br...
 Eigenschaften wiederholen sich häufig (z.B. bei Listen, Eckenradius)
 CSS wird oft doppelt geschrieben (z.B. wenn Selektoren nicht gruppiert werden)
Selektoren können extrem lang werden
 CSS umständlich bei einer Änderung von grundsätzlichen Angaben (z.B. Farben, Abstände)
 keine einheitliche Formatierung (einzeilig, zweizeilig, mit und ohne Einrückung)
 Performanceeinbußen bei Importen von weiteren CSS-Dateien</li></li></ul><li>Warum SASS/SCSS<br />Vorteile gegenüber CSS?<...
 SASS kann rechnen (z.B. Farben, Größen und Abstände)
 einmal eingetragene Eigenschaften können immer wieder benutzt werden
 der Compiler optimiert die CSS-Datei (Selektoren werden gruppiert usw.)
 der Compiler prüft auf korrekte Syntax, erkennt Schreibfehler
 Importe von anderen SCSS/SASS-Dateien übernimmt der Compiler, somit keine Performanceeinbußen
 übersichtliche, einheitliche Schreibweise</li></li></ul><li>Unterschiede SASS und SCSS<br />SASS<br /><ul><li> klassische...
 verzichtet auf Klammern
 benötigt keine Semikolon
 arbeitet mit Einrückungen (immer 4 Leerzeichen, keine Tabs)</li></li></ul><li>Unterschiede SASS und SCSS<br />SCSS<br /><...
 verwendet Klammern und Semikolon
 normales CSS kann einfach einkopiert werden</li></ul>Hinweis:In einem Projekt kann man auch SASS und SCSS mischen!<br />
Variablen<br />Variablen<br /><ul><li> Variablen (Farben, Größen usw.) können definiert und immer verwendet werden</li></l...
 Linkattribute (hover usw.) lassen sich innerhalb des SCSS referenzieren</li></li></ul><li>Einrücken und verschachteln<br ...
Funktionen<br />Funktionen<br /><ul><li> einfache mathematische Rechnungen sind möglich: Addieren +, Subtrahieren -, Multi...
Nächste SlideShare
Wird geladen in …5
×

SASS und SCSS - CSS effektiv schreiben

29.875 Aufrufe

Veröffentlicht am

UPDATE: die Version 2.0 des Vortrags inkl. Compass: http://de.slideshare.net/huabanet/sassscss-und-compass-css-effektiver-schreiben-20

Mein Vortrag "SASS und SCSS - CSS effektiv schreiben" vom TYPO3 Camp 2011

Veröffentlicht in: Technologie
0 Kommentare
13 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
29.875
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
629
Aktionen
Geteilt
0
Downloads
91
Kommentare
0
Gefällt mir
13
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

SASS und SCSS - CSS effektiv schreiben

  1. 1. SASS und SCSS CSS effektiv schreiben<br />
  2. 2. Was machen die bei in2code?<br />Stefan Busemann<br />David Richter<br />Workshops<br />Markus Rodler<br />TYPO3<br />Tina Gasteiger<br />Alex Kellner<br />Security<br />Consulting<br />Wir leben TYPO3<br />Wir unterstützen TYPO3- , Internet- und Full-Service-Agenturen genauso wie große und mittelgroße Firmen, die auf TYPO3 Spezialwissen angewiesen sind.<br />Entwicklung<br />Performance<br />Michael Cannon<br />Martin Huber<br />Extensions<br />Marcus Schwemer<br />FLOW3<br />Fluid<br />
  3. 3. Was ist SASS/SCSS<br />Bedeutung und Funktion<br /><ul><li> SASS ist eine Metasprache zum Kompilieren von CSS
  4. 4. bedeutet „SyntacticallyAwesome Stylesheets“
  5. 5. existiert seit 2007
  6. 6. SCSS (Sassy CSS = freches CSS) wird ab SASS 3.0 unterstützt und basiert auf CSS3
  7. 7. SASS/SCSS wird mit dem HAML-Compiler (Werkzeug in Ruby geschrieben) in CSS gewandelt</li></li></ul><li>Warum SASS/SCSS<br />Nachteile von normalem CSS<br /><ul><li> CSS kann schnell unübersichtlich werden
  8. 8. Eigenschaften wiederholen sich häufig (z.B. bei Listen, Eckenradius)
  9. 9. CSS wird oft doppelt geschrieben (z.B. wenn Selektoren nicht gruppiert werden)
  10. 10. Selektoren können extrem lang werden
  11. 11. CSS umständlich bei einer Änderung von grundsätzlichen Angaben (z.B. Farben, Abstände)
  12. 12. keine einheitliche Formatierung (einzeilig, zweizeilig, mit und ohne Einrückung)
  13. 13. Performanceeinbußen bei Importen von weiteren CSS-Dateien</li></li></ul><li>Warum SASS/SCSS<br />Vorteile gegenüber CSS?<br /><ul><li> grundsätzliche Vorgaben (z.B. Farben, Größen usw. können zentral definiert werden)
  14. 14. SASS kann rechnen (z.B. Farben, Größen und Abstände)
  15. 15. einmal eingetragene Eigenschaften können immer wieder benutzt werden
  16. 16. der Compiler optimiert die CSS-Datei (Selektoren werden gruppiert usw.)
  17. 17. der Compiler prüft auf korrekte Syntax, erkennt Schreibfehler
  18. 18. Importe von anderen SCSS/SASS-Dateien übernimmt der Compiler, somit keine Performanceeinbußen
  19. 19. übersichtliche, einheitliche Schreibweise</li></li></ul><li>Unterschiede SASS und SCSS<br />SASS<br /><ul><li> klassische Syntax, Focus auf Minimalisierung
  20. 20. verzichtet auf Klammern
  21. 21. benötigt keine Semikolon
  22. 22. arbeitet mit Einrückungen (immer 4 Leerzeichen, keine Tabs)</li></li></ul><li>Unterschiede SASS und SCSS<br />SCSS<br /><ul><li> Schreibweise basiert auf normalen CSS
  23. 23. verwendet Klammern und Semikolon
  24. 24. normales CSS kann einfach einkopiert werden</li></ul>Hinweis:In einem Projekt kann man auch SASS und SCSS mischen!<br />
  25. 25. Variablen<br />Variablen<br /><ul><li> Variablen (Farben, Größen usw.) können definiert und immer verwendet werden</li></li></ul><li>Verschachteln und Referenzierung<br />Nesting<br /><ul><li> durch Einrückungen und Verschachtelung von Tags, IDs und Klassen lassen sich Angaben übersichtlich strukturieren
  26. 26. Linkattribute (hover usw.) lassen sich innerhalb des SCSS referenzieren</li></li></ul><li>Einrücken und verschachteln<br />è<br />
  27. 27. Funktionen<br />Funktionen<br /><ul><li> einfache mathematische Rechnungen sind möglich: Addieren +, Subtrahieren -, Multiplizieren * und Dividieren /
  28. 28. auf Farben können berechnet werden</li></ul>è<br />
  29. 29. Funktionen<br />Weitere Funktionen zur Farbberechnungen<br /><ul><li> Farben mischen mit mix
  30. 30. Sättigung ändern mit saturate
  31. 31. Transparenz mit transparentize berechnen
  32. 32. u.v.m
  33. 33. alle Funktionen unter http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html</li></li></ul><li>Definieren und einbinden<br />@mixin und @include<br /><ul><li> wiederkehrende Angaben können mit @mixin definiert und mit @include immer wieder verwendet werden (sinnvoll für Standardformatierungen z.B. runde Ecken)</li></ul>è<br />
  34. 34. Definieren und einbinden<br />@mixin und @include<br /><ul><li> zusätzlich können auch hier Variablen definiert werden um z.B. die gerundeten Ecken flexibler zu gestalten</li></ul>è<br />
  35. 35. Vererben und erweitern<br />@extend<br /><ul><li> komplette Definitionen von Selektoren können in neue Selektoren vererbt werden</li></ul>ACHTUNG: auch Eigenschaften von Nested-Elemnten werden mitvererbt<br />è<br />
  36. 36. Auslagern und einbinden – echte Imports<br /><ul><li> wiederkehrende Werte (z.B. feste Angaben oder Variablen) können in eigene Datei gespeichert werden und beim Compilieren wieder importiert / inkludiert werden.</li></ul>Z.B. Variablen in die Datei _settings.sass oder _settings.scss ausgelagert.<br />Achtung beim Einbinden:<br />@import „settings“ // diese Angabe bei SASS verwenden<br />@include „_settings.scss“ // diese Angabe bei SCSS verwenden<br />Hinweis: Dateien mit Unterstrich werden vom Compiler nicht konvertiert. Sinnvoll bei ausgelagerten und später inkludierten Dateien!<br />
  37. 37. Kontrollstrukturen<br />@if<br /><ul><li> CSS wird abhängig von einer Variable erzeugt</li></ul>è<br />
  38. 38. Kontrollstrukturen<br />@for<br /><ul><li> Berechnungen für CSS durch eine Schleife ausführen lassen
  39. 39. praktisch bei Überschriften</li></ul>è<br />
  40. 40. Kommentare benutzen<br />Globale Kommentare<br /><ul><li> Kommentare mit Slash und Stern bleiben erhalten</li></ul>Interne Kommentar<br /><ul><li> Kommentare mit Doppel-Slash sind nach dem Kompilieren nicht in der CSS-Datei sichtbar</li></ul>è<br />
  41. 41. So geht‘s!<br />1. Um dies nutzen zu können muss Ruby und HAML installiert sein. <br /><ul><li> Windows Installer unter: http://rubyinstaller.org/download.html
  42. 42. bei OS X ist Ruby installiert</li></ul>2. SASS-Unterstützung von HAML installieren<br /><ul><li> Ruby-Konsole öffnen und mit „geminstallsass“ wird HAML installiert</li></li></ul><li>So geht‘s!<br />3. Um eine Datei (z.B. style.scss) zu konvertieren in der Ruby-Konsole zum jeweiligen Verzeichnis wechseln und die Überwachung der Datei mit„sass --watchstyle.scss:style.css“ starten.<br />4. Mit „sass --watchstylesheets/scss:stylesheets/css“ können ganze Verzeichnisse auf Dateien überwacht werden.<br />Achtung: bei Windows muss mit anstatt / gearbeitet werden!<br />Optionen: mit --style kann die CSS auch als compressed oder compact erzeugt werden.<br />
  43. 43. Debugging<br />Rückmeldung bei Fehler in einer Datei:<br /><ul><li> in der Ruby-Konsole beim Konvertieren
  44. 44. beim Reload der HTML-Seite am Seitenbeginn (da in CSS-Datei geschrieben)</li></ul>Häufige Fehlerquellen:<br /><ul><li> Klammern, Semikolon, Leerzeichen oder Einrückung, fehlende Variablen</li></li></ul><li>Nachteile<br /><ul><li> Editorsupport ist noch etwas mager
  45. 45. Wenn direkt in den CSS-Dateien korrigiert wird, werden diese bei Änderungen in der SASS/SCSS-Datei überschreiben
  46. 46. Debugging umständlicher (Zeilenangabe in z.B. Firebug stimmt nicht mit SASS-Datei überein; wenn lokal entwickelt wird kann man mit FireSASS für Firefox debuggen)</li></li></ul><li>Sassify für TYPO3<br /><ul><li> Extension für TYPO3 um SASS/SCSS direkt in TYPO3 zu nutzen
  47. 47. Extension installieren, statisches TS inkludieren, Plugin per TS konfigurieren</li></li></ul><li>Sassify für TYPO3<br />Beispielkonfiguration(inkl. Debugging und Conditional Comments für den geliebten IE):<br />Quelltext:<br />
  48. 48. Links und Quellen<br />Links<br />Homepage von SASS: http://sass-lang.com<br />Wikipedia: http://de.wikipedia.org/wiki/Sass_%28Stylesheet-Sprache%29<br />Quellen<br /><ul><li> t3n-Artikel „CSS leicht gemacht“ – Ausgabe 24
  49. 49. Session „ Strukturiertes CSS mit SASS und sassify“ von Berit Jensen beim t3chh11</li></li></ul><li>Vielen Dank<br />und Happy Styling<br />wünscht <br />Martin Huber!<br />www.in2code.de<br />Stefan Busemann<br />Tina Gasteiger<br />Alex Kellner<br />in2code.<br />

×