Web Design mit Sass
In diesem Buch lernen Sie den CSS-Präprozessor Sass kennen. Wenn Sie Websites technisch umsetzen, und sich der Großteil Ihres Arbeitsalltags im CSS-Code abspielt, sollten Sie Sass verwenden. Sass hilft Ihnen dabei, Stylesheets schneller zu schreiben und moderne oder gar experimentelle Techniken unkompliziert und browserübergreifend einzusetzen. Sass automatisiert lästige Aufgaben, vereinfacht den Umgang mit Media Queries und Gestaltungsrastern und bietet diverse Funktionen von denen Sie in CSS nur träumen können.
Sass existiert bereits seit einigen Jahren, hat in der jüngeren Vergangenheit allerdings stark an Popularität gewonnen. Das liegt u. a. daran, dass Sass deutlich weiterentwickelt wurde. Früher war ein solides Verständnis der Kommandozeile beispielsweise Pflicht um mit Sass effektiv arbeiten zu können. Das ist heute (zum Glück) nicht mehr der Fall. Es existieren diverse Anwendungen und Frameworks um die Arbeit mit Sass so komfortabel wie möglich zu gestalten.
In diesem eBook lernen Sie alle Hintergründe kennen, die notwendig sind um Sass erfolgreich einzusetzen. Anhand zahlreicher Beispiele lernen Sie alle wichtigen Funktionen von Sass kennen und können später selbst beurteilen, wie weit Sie Sass in Ihrem Workflow integrieren möchten.
Dieses Buch hat den Anspruch Ihnen das Thema Sass in möglichst kurzer Zeit zu vermitteln, ohne dass dabei wichtige Inhalte zu kurz kommen. Es wurde daher bewusst kompakt und mit hoher Informationsdichte geschrieben.
Für wen ist dieses Buch gedacht?
Dieses Buch richtet sich an Designer und Frontend-Entwickler, die sich mit der Gestaltung von Websites beschäftigen. Vielleicht haben Sie Begriffe wie Sass, Compass und SCSS bereits aufgeschnappt, wissen aber nicht in welchem Zusammenhang sie zueinander stehen. Vielleicht sind Ihnen die Vorteile von Sass bereits bekannt, aber Sie suchen eine strukturierte Anleitung um Sass erfolgreich einsetzen zu können. Um die verschiedenen Beispiele in diesem Buch nachvollziehen zu können, sollten Sie HTML5 und CSS3 beherrschen. Kenntnisse in JavaScript, PHP oder anderen Programmiersprachen sind hilfreich, aber nicht notwendig. Alles was Sie wissen müssen, um Sass zu verstehen und erfolgreich einzusetzen, werden Sie Schritt für Schritt kennenlernen.
Inhaltsverzeichnis
Über dieses Buch
- Für wen ist dieses Buch gedacht?
- Feedback
- Über den Autor
Einführung und Überblick
- Vorteile von Präprozessoren allgemein
- Vorteile von Sass gegenüber anderen CSS-Präprozessoren
- Vorurteile gegenüber Sass
- Die Entstehung von Sass
- Warum Sass und nicht CSS?
- Was ist Sass bzw. SCSS?
- Die Sass-Syntax
Sass installieren und einrichten
- Ruby / Kommandozeilen-Programm installieren
- Sass über die Kommandozeile installieren
- Kompilierung (Compiling)
- Output-Style
- Sass mit Hilfe von Apps installieren und einrichten
Mit Sass (SCSS) arbeiten
- Code-Editoren für SCSS
- Online-Tools zur Arbeit mit Sass
- Verschachtelte Selektoren (Selector Nesting)
- Verschachtelte Eigenschaften (Property Nesting)
- Eltern-Selektoren referenzieren
- Variablen
- Farben manipulieren
- Mixins
- Extend
- Dateien importieren – @import
- Operatoren
- Media Queries
- Kommentare
Fortgeschrittene Techniken
- @if
- @if/@else
- @for-Schleifen
- @each
- @while
- @function
Frameworks für Sass
- Compass
- Susy
- Bourbon
- Bourbon Neat
- Foundation, Bootstrap & Gumby