Wir leben TYPO3      CSS effektiver schreiben                  Sass/SCSS und CompassWir leben TYPO3                       ...
Was machen die bei in2codeWir unterstützen TYPO3-,Internet- und Full-ServiceAgenturen genauso wie großeund mittelgroße Fir...
Was ist                  Sass und SCSSWir leben TYPO3                   in2code.de
Bedeutung und Funktion• Metasprache zum Kompilieren von CSS• existiert seit 2007• bedeutet „Syntactically Awesome Styleshe...
Warum                  Sass und SCSSWir leben TYPO3                   in2code.de
Nachteile von normalem CSS• CSS kann schnell unübersichtlich werden:    • Eigenschaften wiederholen sich häufig    • CSS w...
Vorteile von Sass/SCSS• grundsätzliche Wert können zentral definiert werden• SASS kann rechnen (z.B. Farben, Größen und Ab...
Unterschiede                   Sass/SCSSWir leben TYPO3                  in2code.de
SASS• klassische Syntax, Focus auf   Minimalisierung• verzichtet auf Klammern• benötigt keine Semikolon• arbeitet mit Einr...
SCSS• Schreibweise basiert auf   normalen CSS• verwendet Klammern und   Semikolon• normales CSS kann einfach   einkopiert ...
HinweisIn einem Projekt kann man Sassund SCSS auch gemischtverwenden!Wir leben TYPO3                  in2code.de
So geht’s!Wir leben TYPO3                in2code.de
Installation1. Ruby und HAML installieren    Windows: http://rubyinstaller.org/downloads/    OSX: schon installiert2. Sass...
Compilieren3. Um eine Datei zu kompilieren in der Ruby-    Konsole/Terminal in das Verzeichnis wechseln und die    Überwac...
CompilierenOptionen:Mit der Option --style kann man die CSS Datei auchcompressed oder compact kompilieren lassen.Wir leben...
Was kann es:                   VariablenWir leben TYPO3                  in2code.de
Variablen können definiertund projektweit verwendetwerden, z.B.• Farben• Größen• Abstände• Fonts• usw.Wir leben TYPO3     ...
Was kann es:                    NestingWir leben TYPO3                  in2code.de
• Übersichtliche Strukturierung durch Einrückung und   Verschachtelung von Tags, IDs und Klassen• Linkattribute (hover usw...
SCSS              wird zu CSS:Wir leben TYPO3                  in2code.de
• Sehr praktisch: Mediaqueries direkt in der   entsprechenden Klasse schreibenSCSS                             wird zu CSS...
Was kann es:      Selektoren kombinierenWir leben TYPO3           in2code.de
Alle bekannten CSS-Selektoren können verwendetwerden! Z.B. >     ~   + usw.Platzhalterfunktion durch & (Ampersand)Dieses h...
SCSS              wird zu CSS:Wir leben TYPO3                  in2code.de
Was kann es:                   RechnenWir leben TYPO3                  in2code.de
SCSS• einfache mathematische   Rechnungen• Farben können   berechnet werden                           wird zu CSS:Wir lebe...
Weiter Funktionen zur Farbberechnung• Farben mischen mit mix• Sättigung ändern mit saturate• Transparenz mit transparentiz...
Was kann es:                   @extendWir leben TYPO3                  in2code.de
SCSSKomplette Definitionen vonSelektoren können in neueSelektoren vererbt werden.ACHTUNG:Auch Eigenschaften vonNested-Elem...
Was kann es:         @mixin und @includeWir leben TYPO3            in2code.de
SCSSwiederkehrende Angabenkönnen mit@mixin definiert und mit@include immer wiederverwendet werden(sinnvoll für Standard-  ...
SCSS… zusätzlichkönnen auch hierVariablen definiertwerden um z.B.die gerundetenEcken flexibler zu    wird zu CSS:gestalten...
ACHTUNG:Die Vendor-Prefixes fürborder-radius sind veraltet!Die Angabe border-radiusalleine reicht auch!Wir leben TYPO3    ...
Was kann es:                   @importWir leben TYPO3                  in2code.de
Gegen über @import in CSS werden importierte Dateienmit in die Datei „einkompiliert“!Dadurch keine Performanceeinbußen wie...
Echte Imports mit @import• wiederkehrende Angaben/Variablen können in eigene   Datei gespeichert werden• Aufsplittung in k...
Strukturierung mit @importHinweis:Dateien mit Unterstrich werdenvom Compiler nicht konvertiert.Sinnvoll bei Dateien, die m...
Strukturierung mit @importInhalt der Dateiquestclub.scssWir leben TYPO3              in2code.de
Strukturierung mit @importWird kompiliert zu:Wir leben TYPO3              in2code.de
Was kann es:                  @if und @elseWir leben TYPO3                   in2code.de
CSS wird abhängig von einer Variable erzeugtSCSS                                wird zu CSS:Wir leben TYPO3               ...
Was kann es:                     @forWir leben TYPO3                  in2code.de
Berechnungen durch eine FOR-Schleife (z.B. Überschriften)SCSS                               wird zu CSS:Wir leben TYPO3   ...
Was kann es:                    @eachWir leben TYPO3                  in2code.de
SCSSBerechnungendurch eineEACH-Schleife                  wird zu CSS:Wir leben TYPO3                  in2code.de
Was kann es:       @function und @returnWir leben TYPO3           in2code.de
SCSSEigene Funktionenkönnen mit@function und@returngeschrieben          wird zu CSS:werden.Verrückte Spielereien mit Funkt...
Was kann es:        KommentarfunktionenWir leben TYPO3           in2code.de
SCSSEs gibt zwei Arten vonKommentaren:• Globale Kommentare /* */   (werden auch ins CSS   geschrieben)                    ...
DebuggingWir leben TYPO3               in2code.de
Rückmeldung bei einem Fehler• in der Ruby-Konsole   beim Konvertieren• beim Reload der HTML-   Seite am Seitenbeginn   (da...
Was ist                  CompassWir leben TYPO3              in2code.de
Compass erweitert SassCompass ist ein Framework für Sass.Es erweitert Sass um etliche CSS3 Funktionen und nützlicheCSS Fea...
So geht’s!Wir leben TYPO3                in2code.de
Installation von CompassSass muss installiert sein (aber das haben wir schon)Ruby-Konsole (Windows) bzw. Terminal (OSX) öf...
Neues Projekt anlegencompass create <projektname>Legt ein neues Projekt an.Compass erstellt folgende Struktur:Wir leben TY...
Projekt konfigurierenDie config.rb ist die Konfigurationsdatei für Compass.Wir leben TYPO3                              in...
Meine KonfigurationWir leben TYPO3       in2code.de
Compass in Sass importierenDas es sich bei Compass um „Sass-Mixins“ handelt, müssenwir diese zuerst in unseren Sass-Dateie...
Compass nutzenGrundsätzlich werden Compass-Mixins mit@include <mixin-name>innerhalb eines Selektors in der Sass-Datei aufg...
Cross-Browser Support konfigurierenDas Verhalten von Compass kann beeinflussen. Z.B:$experimental-support-for-svg: true;in...
Die coolsten Features:             CSS3 MixinsWir leben TYPO3             in2code.de
Beispiel: Text-Shadow und Background-GradientSCSSOnline-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TYPO3           ...
Beispiel: Text-Shadow und Background-Gradientwird zu CSS:Online-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TYPO3   ...
Beispiel: Text-Shadow und Background-GradientSieht dann so aus:Online-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TY...
Alle CSS3 Mixins findetman unter:http://compass-style.org/reference/compass/css3/Wir leben TYPO3                in2code.de
Die coolsten Features:             Link-ColorsWir leben TYPO3             in2code.de
SCSSIn Compasskann man                       wird zu CSS:Linkfarben ineiner einzigenZeile angeben:Online-Demo: http://code...
Die coolsten Features:               HelpersWir leben TYPO3             in2code.de
Image URLAnstatt url kann man Compass die Pfade mit image-urlanpassen lassen. Somit können später Verzeichnisseproblemlos ...
Image Dimension HelpersMit image-height und image-width können die Höheund Breite von Bildern ausgelesen werden.Mit inline...
Image Dimension HelpersSCSSwird zu CSS:Wir leben TYPO3           in2code.de
Image Dimension HelpersDateien im System:        Sieht dann so aus:vdr.jpgspeaker.pngWir leben TYPO3                      ...
Die coolsten Features:           Sprites – i love itWir leben TYPO3             in2code.de
Basic UsageDateien im Projekt                     Hiermit wird die Spritemap                     und die dazugehörigen    ...
Basic Usagewird zu CSS:                  …und diesem Sprite:Wir leben TYPO3                    in2code.de
Basic UsageNun können die erzeugten Klassen bei Bedarf erweitertwerden und im HTML-Markup verwendet werden:<p class=„icons...
Selector ControlIm SCSS können die Sprites ebenso in eigenen Klassenverwendet werden:.zum-anfang {    @include icons-sprit...
Selector ControlFalls man ein einziges Sprite verschieben/korrigieren muss(nicht die ganze Map!):.zum-anfang {    @include...
Magic SelectorDateien im Projekt                     Hiermit werden Spritemaps                     und CSS inklusive der  ...
Magic Selectorwird zu CSS:…und diesem Sprite:Wir leben TYPO3       in2code.de
Sprites konfigurierenEinige Einstellmöglichkeiten:$<map>-spacing                   //Abstände in px um die Sprites$<map>-<...
Compass erweiternWir leben TYPO3                in2code.de
Compass mit Plugins erweiternCompass kann mit Plugins erweitert werden!Viele Plugins unter: http://bit.ly/fAzE7bEin Beispi...
Compass mit Plugins erweiternInstallation mit: gem install compass-rgbapngAuf Mac: sudo gem install compass-rgbapngAnschli...
Compass mit Plugins erweiternErzeugt dieses CSS:Und dies im Dateisystem:Wir leben TYPO3                 in2code.de
LinksWir leben TYPO3           in2code.de
Weitere Hilfe im NetzSass: http://www.sass-lang.comSass Examples: http://thesassway.comCompass: http://www.compass-style.o...
Und? Nicht cool?                       Fragen?                  Dann Happy Styling                    Martin HuberWir lebe...
Nächste SlideShare
Wird geladen in …5
×

Sass/SCSS und Compass - CSS effektiver schreiben 2.0

4.430 Aufrufe

Veröffentlicht am

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

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.430
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
41
Kommentare
0
Gefällt mir
7
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Sass/SCSS und Compass - CSS effektiver schreiben 2.0

  1. 1. Wir leben TYPO3 CSS effektiver schreiben Sass/SCSS und CompassWir leben TYPO3 in2code.de
  2. 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. 3. Was ist Sass und SCSSWir leben TYPO3 in2code.de
  4. 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. 5. Warum Sass und SCSSWir leben TYPO3 in2code.de
  6. 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. 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. 8. Unterschiede Sass/SCSSWir leben TYPO3 in2code.de
  9. 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. 10. SCSS• Schreibweise basiert auf normalen CSS• verwendet Klammern und Semikolon• normales CSS kann einfach einkopiert werdenWir leben TYPO3 in2code.de
  11. 11. HinweisIn einem Projekt kann man Sassund SCSS auch gemischtverwenden!Wir leben TYPO3 in2code.de
  12. 12. So geht’s!Wir leben TYPO3 in2code.de
  13. 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. 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. 15. CompilierenOptionen:Mit der Option --style kann man die CSS Datei auchcompressed oder compact kompilieren lassen.Wir leben TYPO3 in2code.de
  16. 16. Was kann es: VariablenWir leben TYPO3 in2code.de
  17. 17. Variablen können definiertund projektweit verwendetwerden, z.B.• Farben• Größen• Abstände• Fonts• usw.Wir leben TYPO3 in2code.de
  18. 18. Was kann es: NestingWir leben TYPO3 in2code.de
  19. 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. 20. SCSS wird zu CSS:Wir leben TYPO3 in2code.de
  21. 21. • Sehr praktisch: Mediaqueries direkt in der entsprechenden Klasse schreibenSCSS wird zu CSS:Wir leben TYPO3 in2code.de
  22. 22. Was kann es: Selektoren kombinierenWir leben TYPO3 in2code.de
  23. 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. 24. SCSS wird zu CSS:Wir leben TYPO3 in2code.de
  25. 25. Was kann es: RechnenWir leben TYPO3 in2code.de
  26. 26. SCSS• einfache mathematische Rechnungen• Farben können berechnet werden wird zu CSS:Wir leben TYPO3 in2code.de
  27. 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. 28. Was kann es: @extendWir leben TYPO3 in2code.de
  29. 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. 30. Was kann es: @mixin und @includeWir leben TYPO3 in2code.de
  31. 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. 32. SCSS… zusätzlichkönnen auch hierVariablen definiertwerden um z.B.die gerundetenEcken flexibler zu wird zu CSS:gestaltenWir leben TYPO3 in2code.de
  33. 33. ACHTUNG:Die Vendor-Prefixes fürborder-radius sind veraltet!Die Angabe border-radiusalleine reicht auch!Wir leben TYPO3 in2code.de
  34. 34. Was kann es: @importWir leben TYPO3 in2code.de
  35. 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. 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. 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. 38. Strukturierung mit @importInhalt der Dateiquestclub.scssWir leben TYPO3 in2code.de
  39. 39. Strukturierung mit @importWird kompiliert zu:Wir leben TYPO3 in2code.de
  40. 40. Was kann es: @if und @elseWir leben TYPO3 in2code.de
  41. 41. CSS wird abhängig von einer Variable erzeugtSCSS wird zu CSS:Wir leben TYPO3 in2code.de
  42. 42. Was kann es: @forWir leben TYPO3 in2code.de
  43. 43. Berechnungen durch eine FOR-Schleife (z.B. Überschriften)SCSS wird zu CSS:Wir leben TYPO3 in2code.de
  44. 44. Was kann es: @eachWir leben TYPO3 in2code.de
  45. 45. SCSSBerechnungendurch eineEACH-Schleife wird zu CSS:Wir leben TYPO3 in2code.de
  46. 46. Was kann es: @function und @returnWir leben TYPO3 in2code.de
  47. 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. 48. Was kann es: KommentarfunktionenWir leben TYPO3 in2code.de
  49. 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. 50. DebuggingWir leben TYPO3 in2code.de
  51. 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. 52. Was ist CompassWir leben TYPO3 in2code.de
  53. 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. 54. So geht’s!Wir leben TYPO3 in2code.de
  55. 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. 56. Neues Projekt anlegencompass create <projektname>Legt ein neues Projekt an.Compass erstellt folgende Struktur:Wir leben TYPO3 in2code.de
  57. 57. Projekt konfigurierenDie config.rb ist die Konfigurationsdatei für Compass.Wir leben TYPO3 in2code.de
  58. 58. Meine KonfigurationWir leben TYPO3 in2code.de
  59. 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. 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. 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. 62. Die coolsten Features: CSS3 MixinsWir leben TYPO3 in2code.de
  63. 63. Beispiel: Text-Shadow und Background-GradientSCSSOnline-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TYPO3 in2code.de
  64. 64. Beispiel: Text-Shadow und Background-Gradientwird zu CSS:Online-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TYPO3 in2code.de
  65. 65. Beispiel: Text-Shadow und Background-GradientSieht dann so aus:Online-Demo: http://codepen.io/Huaba/full/LiqJeWir leben TYPO3 in2code.de
  66. 66. Alle CSS3 Mixins findetman unter:http://compass-style.org/reference/compass/css3/Wir leben TYPO3 in2code.de
  67. 67. Die coolsten Features: Link-ColorsWir leben TYPO3 in2code.de
  68. 68. SCSSIn Compasskann man wird zu CSS:Linkfarben ineiner einzigenZeile angeben:Online-Demo: http://codepen.io/Huaba/full/ojHFvWir leben TYPO3 in2code.de
  69. 69. Die coolsten Features: HelpersWir leben TYPO3 in2code.de
  70. 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. 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. 72. Image Dimension HelpersSCSSwird zu CSS:Wir leben TYPO3 in2code.de
  73. 73. Image Dimension HelpersDateien im System: Sieht dann so aus:vdr.jpgspeaker.pngWir leben TYPO3 in2code.de
  74. 74. Die coolsten Features: Sprites – i love itWir leben TYPO3 in2code.de
  75. 75. Basic UsageDateien im Projekt Hiermit wird die Spritemap und die dazugehörigen CSS-Klassen automatisch erzeugt.SCSSWir leben TYPO3 in2code.de
  76. 76. Basic Usagewird zu CSS: …und diesem Sprite:Wir leben TYPO3 in2code.de
  77. 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. 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. 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. 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. 81. Magic Selectorwird zu CSS:…und diesem Sprite:Wir leben TYPO3 in2code.de
  82. 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. 83. Compass erweiternWir leben TYPO3 in2code.de
  84. 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. 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. 86. Compass mit Plugins erweiternErzeugt dieses CSS:Und dies im Dateisystem:Wir leben TYPO3 in2code.de
  87. 87. LinksWir leben TYPO3 in2code.de
  88. 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. 89. Und? Nicht cool? Fragen? Dann Happy Styling Martin HuberWir leben TYPO3 in2code.de

×