Your SlideShare is downloading. ×
Sass/SCSS und Compass - CSS effektiver schreiben 2.0
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Sass/SCSS und Compass - CSS effektiver schreiben 2.0

3,398
views

Published on

Webseiten entwickeln und erstellen: CSS effektiver schreiben mit Hilfe von Sass/SCSS oder dem Framework Compass.

Webseiten entwickeln und erstellen: CSS effektiver schreiben mit Hilfe von Sass/SCSS oder dem Framework Compass.

Published in: Technology

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,398
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Wir leben TYPO3 CSS effektiver schreiben Sass/SCSS und CompassWir leben TYPO3 in2code.de
  • 2. Was machen die bei in2codeWir unterstützen TYPO3-,Internet- und Full-ServiceAgenturen genauso wie großeund mittelgroße Firmen, dieauf TYPO3 Spezialwissenangewiesen sind.Wir leben TYPO3 in2code.de
  • 3. Was ist Sass und SCSSWir 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 mehrWir leben TYPO3 in2code.de
  • 5. Warum Sass und SCSSWir leben TYPO3 in2code.de
  • 6. Nachteile von normalem CSS• 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 ImportenWir 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 SchreibweiseWir leben TYPO3 in2code.de
  • 8. Unterschiede Sass/SCSSWir 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 basiert auf normalen CSS• verwendet Klammern und Semikolon• normales CSS kann einfach einkopiert werdenWir leben TYPO3 in2code.de
  • 11. HinweisIn einem Projekt kann man Sassund SCSS auch gemischtverwenden!Wir leben TYPO3 in2code.de
  • 12. So geht’s!Wir leben TYPO3 in2code.de
  • 13. Installation1. Ruby und HAML installieren Windows: http://rubyinstaller.org/downloads/ OSX: schon installiert2. 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. Compilieren3. Um eine Datei zu kompilieren in der Ruby- Konsole/Terminal in das Verzeichnis wechseln und die Überwachung starten mit sass --watch dateiname.scss:dateiname.css4. Ganze Verzeichnisse können auch überwacht werden: sass --watch ordername/scss:ordnername/css Unter Windows mit anstatt / arbeiten!Wir leben TYPO3 in2code.de
  • 15. CompilierenOptionen:Mit der Option --style kann man die CSS Datei auchcompressed oder compact kompilieren lassen.Wir leben TYPO3 in2code.de
  • 16. Was kann es: VariablenWir leben TYPO3 in2code.de
  • 17. Variablen können definiertund projektweit verwendetwerden, z.B.• Farben• Größen• Abstände• Fonts• usw.Wir leben TYPO3 in2code.de
  • 18. Was kann es: NestingWir leben TYPO3 in2code.de
  • 19. • Übersichtliche Strukturierung durch Einrückung und Verschachtelung von Tags, IDs und Klassen• Linkattribute (hover usw.) lassen sich innerhalb des SCSS referenzierenWir leben TYPO3 in2code.de
  • 20. SCSS wird zu CSS:Wir leben TYPO3 in2code.de
  • 21. • Sehr praktisch: Mediaqueries direkt in der entsprechenden Klasse schreibenSCSS wird zu CSS:Wir leben TYPO3 in2code.de
  • 22. Was kann es: Selektoren kombinierenWir leben TYPO3 in2code.de
  • 23. Alle bekannten CSS-Selektoren können verwendetwerden! 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: RechnenWir 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 zur Farbberechnung• Farben mischen mit mix• Sättigung ändern mit saturate• Transparenz mit transparentize berechnen• u.v.mAlle Funktionen unterhttp://sass-lang.com/docs/yardoc/Sass/Script/Functions.htmlWir leben TYPO3 in2code.de
  • 28. Was kann es: @extendWir leben TYPO3 in2code.de
  • 29. SCSSKomplette Definitionen vonSelektoren können in neueSelektoren vererbt werden.ACHTUNG:Auch Eigenschaften vonNested-Elementen werden wird zu CSS:mitvererbt. Deshalb immer nureine Regel vererben!Wir leben TYPO3 in2code.de
  • 30. Was kann es: @mixin und @includeWir leben TYPO3 in2code.de
  • 31. SCSSwiederkehrende Angabenkönnen mit@mixin definiert und mit@include immer wiederverwendet werden(sinnvoll für Standard- wird zu CSS:formatierungenz.B. runde Ecken)…Wir leben TYPO3 in2code.de
  • 32. SCSS… zusätzlichkönnen auch hierVariablen definiertwerden um z.B.die gerundetenEcken flexibler zu wird zu CSS:gestaltenWir leben TYPO3 in2code.de
  • 33. ACHTUNG:Die Vendor-Prefixes fürborder-radius sind veraltet!Die Angabe border-radiusalleine reicht auch!Wir leben TYPO3 in2code.de
  • 34. Was kann es: @importWir leben TYPO3 in2code.de
  • 35. Gegen über @import in CSS werden importierte Dateienmit in die Datei „einkompiliert“!Dadurch keine Performanceeinbußen wie in CSS durchzusätzliche HTTP-Referrers.Mit @import in Sass kann ein Projekt optimialstrukturiert 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 Kompilierenan dieser Stelle.Wir leben TYPO3 in2code.de
  • 37. Strukturierung mit @importHinweis:Dateien mit Unterstrich werdenvom Compiler nicht konvertiert.Sinnvoll bei Dateien, die mit@import beim Kompiliereninkludiert werden.Wir leben TYPO3 in2code.de
  • 38. Strukturierung mit @importInhalt der Dateiquestclub.scssWir leben TYPO3 in2code.de
  • 39. Strukturierung mit @importWird kompiliert zu:Wir leben TYPO3 in2code.de
  • 40. Was kann es: @if und @elseWir leben TYPO3 in2code.de
  • 41. CSS wird abhängig von einer Variable erzeugtSCSS wird zu CSS:Wir leben TYPO3 in2code.de
  • 42. Was kann es: @forWir leben TYPO3 in2code.de
  • 43. Berechnungen durch eine FOR-Schleife (z.B. Überschriften)SCSS wird zu CSS:Wir leben TYPO3 in2code.de
  • 44. Was kann es: @eachWir leben TYPO3 in2code.de
  • 45. SCSSBerechnungendurch eineEACH-Schleife wird zu CSS:Wir leben TYPO3 in2code.de
  • 46. Was kann es: @function und @returnWir leben TYPO3 in2code.de
  • 47. SCSSEigene Funktionenkönnen mit@function und@returngeschrieben wird zu CSS:werden.Verrückte Spielereien mit Funktionen und Schatten unter:http://sassymothereffingtextshadow.com/Wir leben TYPO3 in2code.de
  • 48. Was kann es: KommentarfunktionenWir leben TYPO3 in2code.de
  • 49. SCSSEs gibt zwei Arten vonKommentaren:• Globale Kommentare /* */ (werden auch ins CSS geschrieben) wird zu CSS:• Interne Kommentar // (werden nicht ins CSS kompiliert)Wir leben TYPO3 in2code.de
  • 50. DebuggingWir leben TYPO3 in2code.de
  • 51. Rückmeldung bei einem Fehler• 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 CompassWir leben TYPO3 in2code.de
  • 53. Compass erweitert SassCompass ist ein Framework für Sass.Es erweitert Sass um etliche CSS3 Funktionen und nützlicheCSS Features.Beispiele:• Einfachste Anwendung von Sprites• CSS3 für alle Browser in einer ZeileWir leben TYPO3 in2code.de
  • 54. So geht’s!Wir leben TYPO3 in2code.de
  • 55. Installation von CompassSass muss installiert sein (aber das haben wir schon)Ruby-Konsole (Windows) bzw. Terminal (OSX) öffnengem install compass (Windows) bzw.sudo gem install compass (OSX)Fertig!Wir leben TYPO3 in2code.de
  • 56. Neues Projekt anlegencompass create <projektname>Legt ein neues Projekt an.Compass erstellt folgende Struktur:Wir leben TYPO3 in2code.de
  • 57. Projekt konfigurierenDie config.rb ist die Konfigurationsdatei für Compass.Wir leben TYPO3 in2code.de
  • 58. Meine KonfigurationWir leben TYPO3 in2code.de
  • 59. Compass in Sass importierenDas es sich bei Compass um „Sass-Mixins“ handelt, müssenwir diese zuerst in unseren Sass-Dateien importieren um dieFunktionen nutzen zu können:@import „compass“Hier werden alle Compass-Funktionen importiert.@import „compass/css3“Importiert z.B. nur die CSS3-MixinsWir leben TYPO3 in2code.de
  • 60. Compass nutzenGrundsätzlich werden Compass-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 konfigurierenDas Verhalten von Compass kann beeinflussen. Z.B:$experimental-support-for-svg: true;innerhalb einer Sass-Datei eines Projekts aktiviert dasGenerieren von SVG-Hintergründen für IE, der keinenBackground-Gradient kann.Alle „Features“ gibt es unter:http://compass-style.org/reference/compass/support/Wir leben TYPO3 in2code.de
  • 62. Die coolsten Features: CSS3 MixinsWir leben TYPO3 in2code.de
  • 63. Beispiel: Text-Shadow und Background-GradientSCSSOnline-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TYPO3 in2code.de
  • 64. Beispiel: Text-Shadow und Background-Gradientwird zu CSS:Online-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TYPO3 in2code.de
  • 65. Beispiel: Text-Shadow und Background-GradientSieht dann so aus:Online-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TYPO3 in2code.de
  • 66. Alle CSS3 Mixins findetman unter:http://compass-style.org/reference/compass/css3/Wir leben TYPO3 in2code.de
  • 67. Die coolsten Features: Link-ColorsWir leben TYPO3 in2code.de
  • 68. SCSSIn Compasskann man wird zu CSS:Linkfarben ineiner einzigenZeile angeben:Online-Demo: http://codepen.io/Huaba/full/ojHFvWir leben TYPO3 in2code.de
  • 69. Die coolsten Features: HelpersWir leben TYPO3 in2code.de
  • 70. Image URLAnstatt url kann man Compass die Pfade mit image-urlanpassen lassen. Somit können später Verzeichnisseproblemlos umbenannt werden.SCSSwird zu CSS:Wir leben TYPO3 in2code.de
  • 71. Image Dimension HelpersMit image-height und image-width können die Höheund Breite von Bildern ausgelesen werden.Mit inline-image(„bildname.png“) kann man Bilderauch als Inlinebilder berechnen lassen.Wir leben TYPO3 in2code.de
  • 72. Image Dimension HelpersSCSSwird zu CSS:Wir leben TYPO3 in2code.de
  • 73. Image Dimension HelpersDateien im System: Sieht dann so aus:vdr.jpgspeaker.pngWir leben TYPO3 in2code.de
  • 74. Die coolsten Features: Sprites – i love itWir leben TYPO3 in2code.de
  • 75. Basic UsageDateien im Projekt Hiermit wird die Spritemap und die dazugehörigen CSS-Klassen automatisch erzeugt.SCSSWir leben TYPO3 in2code.de
  • 76. Basic Usagewird zu CSS: …und diesem Sprite:Wir leben TYPO3 in2code.de
  • 77. Basic UsageNun können die erzeugten Klassen bei Bedarf erweitertwerden und im HTML-Markup verwendet werden:<p class=„icons-first“>Zum Anfang</p>Sieht dann so aus:Wir leben TYPO3 in2code.de
  • 78. Selector ControlIm SCSS können die Sprites ebenso in eigenen Klassenverwendet werden:.zum-anfang { @include icons-sprite(first);}Sieht dann so aus:Wir leben TYPO3 in2code.de
  • 79. Selector ControlFalls man ein 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 SelectorDateien im Projekt 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 Selectorwird zu CSS:…und diesem Sprite:Wir leben TYPO3 in2code.de
  • 82. Sprites konfigurierenEinige 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öglichMehr Optionen unter:http://compass-style.org/help/tutorials/spriting/customization-options/Wir leben TYPO3 in2code.de
  • 83. Compass erweiternWir leben TYPO3 in2code.de
  • 84. Compass mit Plugins erweiternCompass kann mit Plugins erweitert werden!Viele Plugins unter: http://bit.ly/fAzE7bEin Beispiel: RGBAPNG-Plugin:https://github.com/aaronrussell/compass-rgbapngDieses Plugin bringt Cross-Browser Support für RGBA.Wir leben TYPO3 in2code.de
  • 85. Compass mit Plugins erweiternInstallation mit: gem install compass-rgbapngAuf Mac: sudo gem install compass-rgbapngAnschließend in der config.rb hinzufügen:require „rgbapng“Verwendung im SCSS mitWir leben TYPO3 in2code.de
  • 86. Compass mit Plugins erweiternErzeugt dieses CSS:Und dies im Dateisystem:Wir leben TYPO3 in2code.de
  • 87. LinksWir leben TYPO3 in2code.de
  • 88. Weitere Hilfe im NetzSass: http://www.sass-lang.comSass Examples: http://thesassway.comCompass: http://www.compass-style.orgPlugins für Compass: http://bit.ly/fAzE7bRubyinstaller für Windows: http://www.rubyinstaller.orgWir leben TYPO3 in2code.de
  • 89. Und? Nicht cool? Fragen? Dann Happy Styling Martin HuberWir leben TYPO3 in2code.de