SASS und SCSS - CSS effektiv schreiben

27
in2code.de Wir leben TYPO3 Wir leben TYPO3 SASS und SCSS CSS effektiv schreiben

description

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

Transcript of SASS und SCSS - CSS effektiv schreiben

Page 1: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Wir leben TYPO3

SASS und SCSSCSS effektiv schreiben

Page 2: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Was machen die bei in2code?

Alex Kellner

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.

TYPO3

Extensions

Entwicklung

Fluid

Security

Performance

Workshops

FLOW3Martin HuberMarcus

Schwemer

Michael Cannon

Stefan BusemannMarkus Rodler

David Richter

Tina Gasteiger

Consulting

Page 3: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Was ist SASS/SCSS

Bedeutung und Funktion

• SASS ist eine Metasprache zum Kompilieren von CSS

• bedeutet „Syntactically Awesome 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

Page 4: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Warum SASS/SCSS

Nachteile von normalem CSS

• CSS kann schnell unübersichtlich werden

• 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

Page 5: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Warum SASS/SCSS

Vorteile gegenüber CSS?

• grundsätzliche Vorgaben (z.B. Farben, Größen usw. 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

• 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

Page 6: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Unterschiede SASS und SCSS

SASS

• klassische Syntax, Focus auf Minimalisierung

• verzichtet auf Klammern

• benötigt keine Semikolon

• arbeitet mit Einrückungen (immer 4 Leerzeichen, keine

Tabs)

Page 7: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Unterschiede SASS und SCSS

SCSS

• Schreibweise basiert auf normalen CSS

• verwendet Klammern und Semikolon

• normales CSS kann einfach einkopiert werden

Hinweis:

In einem Projekt kann man auch SASS und SCSS

mischen!

Page 8: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Variablen

Variablen

• Variablen (Farben, Größen

usw.) können definiert und

immer verwendet werden

Page 9: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Verschachteln und Referenzierung

Nesting

• durch Einrückungen und Verschachtelung von Tags, IDs und Klassen

lassen sich Angaben übersichtlich strukturieren

• Linkattribute (hover usw.) lassen sich innerhalb des SCSS referenzieren

Page 10: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Einrücken und verschachteln

è

Page 11: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Funktionen

Funktionen

• einfache mathematische Rechnungen sind

möglich: Addieren +, Subtrahieren -,

Multiplizieren * und Dividieren /

• auf Farben können berechnet werden

è

Page 12: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Funktionen

Weitere Funktionen zur Farbberechnungen

• 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

Page 13: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Definieren und einbinden

@mixin und @include

• wiederkehrende Angaben können mit

@mixin definiert und mit @include immer

wieder verwendet werden (sinnvoll für

Standardformatierungen z.B. runde Ecken)

è

Page 14: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Definieren und einbinden

@mixin und @include

• zusätzlich können auch hier

Variablen definiert werden um

z.B. die gerundeten Ecken

flexibler zu gestalten

è

Page 15: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Vererben und erweitern

@extend

• komplette Definitionen von

Selektoren können in neue

Selektoren vererbt werden

ACHTUNG:

auch Eigenschaften von Nested-

Elemnten werden mitvererbt

è

Page 16: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Auslagern und einbinden – echte Imports

• wiederkehrende Werte (z.B. feste Angaben oder Variablen) können in eigene

Datei gespeichert werden und beim Compilieren wieder importiert / inkludiert

werden.

Z.B. Variablen in die Datei _settings.sass oder _settings.scss ausgelagert.

Achtung beim Einbinden:

@import „settings“ // diese Angabe bei SASS verwenden

@include „_settings.scss“ // diese Angabe bei SCSS verwenden

Hinweis: Dateien mit Unterstrich werden vom Compiler nicht konvertiert.

Sinnvoll bei ausgelagerten und später inkludierten Dateien!

Page 17: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Kontrollstrukturen

@if

• CSS wird abhängig von einer Variable

erzeugtè

Page 18: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Kontrollstrukturen

@for

• Berechnungen für CSS durch eine

Schleife ausführen lassen

• praktisch bei Überschriften

è

Page 19: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Kommentare benutzen

Globale Kommentare

• Kommentare mit Slash und Stern bleiben

erhalten

Interne Kommentar

• Kommentare mit Doppel-Slash sind nach

dem Kompilieren nicht in der CSS-Datei

sichtbar

è

Page 20: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

So geht‘s!

1. Um dies nutzen zu können muss Ruby und HAML installiert sein.

• Windows Installer unter: http://rubyinstaller.org/download.html

• bei OS X ist Ruby installiert

2. SASS-Unterstützung von HAML installieren

• Ruby-Konsole öffnen und mit „gem install sass“ wird HAML

installiert

Page 21: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

So geht‘s!

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 --watch style.scss:style.css“ starten.

4. Mit „sass --watch stylesheets/scss:stylesheets/css“

können ganze Verzeichnisse auf Dateien überwacht werden.

Achtung: bei Windows muss mit \ anstatt / gearbeitet werden!

Optionen: mit --style kann die CSS auch als compressed oder compact

erzeugt werden.

Page 22: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Debugging

Rückmeldung bei Fehler in einer

Datei:

• in der Ruby-Konsole beim Konvertieren

• beim Reload der HTML-Seite am

Seitenbeginn (da in CSS-Datei

geschrieben)

Häufige Fehlerquellen:

• Klammern, Semikolon, Leerzeichen

oder Einrückung, fehlende Variablen

Page 23: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Nachteile

• Editorsupport ist noch etwas mager

• Wenn direkt in den CSS-Dateien korrigiert wird, werden diese bei

Änderungen in der SASS/SCSS-Datei überschreiben

• 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)

Page 24: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Sassify für TYPO3

• Extension für TYPO3 um SASS/SCSS direkt in TYPO3 zu nutzen

• Extension installieren, statisches TS inkludieren, Plugin per TS

konfigurieren

Page 25: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Sassify für TYPO3

Beispielkonfiguration

(inkl. Debugging und Conditional Comments für den geliebten IE):

Quelltext:

Page 26: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3

Links und Quellen

Links

Homepage von SASS: http://sass-lang.com

Wikipedia: http://de.wikipedia.org/wiki/Sass_%28Stylesheet-Sprache%29

Quellen

• t3n-Artikel „CSS leicht gemacht“ – Ausgabe 24

• Session „ Strukturiertes CSS mit SASS und sassify“ von Berit Jensen beim

t3chh11

Page 27: SASS und SCSS - CSS effektiv schreiben

in2code.deWir leben TYPO3in2code.

Vielen Dankund Happy Styling

wünscht Martin Huber!

www.in2code.deStefan BusemannTina GasteigerAlex Kellner