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

1. SASS und SCSS CSS effektiv schreiben

2. Was machen die bei in2code? Stefan Busemann David Richter Workshops Markus Rodler TYPO3 Tina Gasteiger Alex Kellner Security Consulting Wir leben TYPO3 Wir unterstützen TYPO3- , Internet- und Full-Service-Agenturen genauso wie große und mittelgroße Firmen, die auf TYPO3 Spezialwissen angewiesen sind. Entwicklung Performance Michael Cannon Martin Huber Extensions Marcus Schwemer FLOW3 Fluid

4. bedeutet „SyntacticallyAwesome Stylesheets“

5. existiert seit 2007

6. SCSS (Sassy CSS = freches CSS) wird ab SASS 3.0 unterstützt und basiert auf CSS3

8. Eigenschaften wiederholen sich häufig (z.B. bei Listen, Eckenradius)

9. CSS wird oft doppelt geschrieben (z.B. wenn Selektoren nicht gruppiert werden)

10. Selektoren können extrem lang werden

11. CSS umständlich bei einer Änderung von grundsätzlichen Angaben (z.B. Farben, Abstände)

12. keine einheitliche Formatierung (einzeilig, zweizeilig, mit und ohne Einrückung)

14. SASS kann rechnen (z.B. Farben, Größen und Abstände)

15. einmal eingetragene Eigenschaften können immer wieder benutzt werden

16. der Compiler optimiert die CSS-Datei (Selektoren werden gruppiert usw.)

17. der Compiler prüft auf korrekte Syntax, erkennt Schreibfehler

18. Importe von anderen SCSS/SASS-Dateien übernimmt der Compiler, somit keine Performanceeinbußen

20. verzichtet auf Klammern

21. benötigt keine Semikolon

23. verwendet Klammern und Semikolon

24. normales CSS kann einfach einkopiert werdenHinweis:In einem Projekt kann man auch SASS und SCSS mischen!

28. auf Farben können berechnet werdenè

30. Sättigung ändern mit saturate

31. Transparenz mit transparentize berechnen

32. u.v.m

39. praktisch bei Überschriftenè

45. Wenn direkt in den CSS-Dateien korrigiert wird, werden diese bei Änderungen in der SASS/SCSS-Datei überschreiben