SlideShare ist ein Scribd-Unternehmen logo
1 von 27
Downloaden Sie, um offline zu lesen
SASS und SCSS	CSS effektiv schreiben
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
Was ist SASS/SCSS Bedeutung und Funktion ,[object Object]
 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,[object Object]
 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,[object Object]
 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,[object Object]
 verzichtet auf Klammern
 benötigt keine Semikolon
 arbeitet mit Einrückungen (immer 4 Leerzeichen, keine Tabs),[object Object]
 verwendet Klammern und Semikolon
 normales CSS kann einfach einkopiert werdenHinweis:In einem Projekt kann man auch SASS und SCSS mischen!
Variablen Variablen ,[object Object],[object Object]
 Linkattribute (hover usw.) lassen sich innerhalb des SCSS referenzieren,[object Object]
Funktionen Funktionen ,[object Object]

Weitere ähnliche Inhalte

Ähnlich wie SASS und SCSS - CSS effektiv schreiben

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
Anforderungen an Thesauri im Semantic Web
Anforderungen an Thesauri im Semantic WebAnforderungen an Thesauri im Semantic Web
Anforderungen an Thesauri im Semantic WebJoachim Neubert
 
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTENCM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTENtecom
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Noël Bossart
 
Der Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenDer Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenOPEN KNOWLEDGE GmbH
 
Dokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDBDokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDBMario Müller
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in RailsAngelo Maron
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJohannes Hohenbichler
 
Datenbanken - Eine Übersicht (WPMeetUP München)
Datenbanken - Eine Übersicht (WPMeetUP München)Datenbanken - Eine Übersicht (WPMeetUP München)
Datenbanken - Eine Übersicht (WPMeetUP München)Dietmar Leher
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11Noël Bossart
 

Ähnlich wie SASS und SCSS - CSS effektiv schreiben (20)

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Anforderungen an Thesauri im Semantic Web
Anforderungen an Thesauri im Semantic WebAnforderungen an Thesauri im Semantic Web
Anforderungen an Thesauri im Semantic Web
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
Vorschau auf Drupal 8
Vorschau auf Drupal 8Vorschau auf Drupal 8
Vorschau auf Drupal 8
 
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTENCM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
CM9 - MIT EIGENLEISTUNG DANK/TROTZ WORD EIN OPTIMALES REDAKTIONSSYSTEM ERHALTEN
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10Einführung XHTML CSS JS // IT 07-10
Einführung XHTML CSS JS // IT 07-10
 
Der Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenDer Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren Projekten
 
Dokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDBDokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDB
 
Conference 2013 REST
Conference 2013 RESTConference 2013 REST
Conference 2013 REST
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
 
Objektorientiertes CSS
Objektorientiertes CSSObjektorientiertes CSS
Objektorientiertes CSS
 
XHTML
XHTMLXHTML
XHTML
 
Java Magazin - Lift
Java Magazin - LiftJava Magazin - Lift
Java Magazin - Lift
 
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit LiftJava Magazin 5 / 2010 - Twitter nachgebaut mit Lift
Java Magazin 5 / 2010 - Twitter nachgebaut mit Lift
 
Datenbanken - Eine Übersicht (WPMeetUP München)
Datenbanken - Eine Übersicht (WPMeetUP München)Datenbanken - Eine Übersicht (WPMeetUP München)
Datenbanken - Eine Übersicht (WPMeetUP München)
 
SQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" EntwicklerSQL Developer 4.x - Tipps für "faule" Entwickler
SQL Developer 4.x - Tipps für "faule" Entwickler
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Workshop: Besseres C#
Workshop: Besseres C#Workshop: Besseres C#
Workshop: Besseres C#
 
CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11CSS Basics and Box Model // MM 08-11
CSS Basics and Box Model // MM 08-11
 

SASS und SCSS - CSS effektiv schreiben