kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Sass


SVG als CSS-background verwenden und umfärben

Das Grafikformat SVG bietet sich aufgrund geringer Dateigrößen, verlustfreier Skalierung und zahlreicher Manipulationsmöglichkeiten für viele Anwendungsfälle an. Die verschiedenen Möglichkeiten SVG in eine Website einzubauen haben alle Vor- und Nachteile. Ein Nachteil beim Einsatz als background-image im CSS-Code besteht darin, dass die SVG nicht mehr umgefärbt werden kann. Insbesondere beim Einsatz von Icons kann das lästig sein. Mit Sass und Data URIs gibt es jedoch eine Lösung.

Beitrag zu Ende lesen

Sass Clearfix

In gefloateten Layouts müssen die Floats i.d.R. an bestimmten Stellen aufgehoben werden um Fehldarstellungen zu vermeiden. Wenn der Code aus klassischem CSS basiert, existiert dazu ein Clearfix. Wenn ein Präprozessor wie beispielsweise Sass zum Einsatz kommt, kann der Code über einen Placeholder noch ein wenig optimiert werden.
Beitrag zu Ende lesen

Sass: »Semantische Raster« mit Hilfe von %placeholdern und @for-Schleifen

An klassenbasierten Rastern wird häufig kritisiert, dass das HTML-Markup durch eben jene Klassen unnötig aufgebläht wird. In einem sog. »semantischen Raster (semantic Grid)« kann auf diese Klassen verzichtet werden, da im Stylesheet die gewünschte Spaltenbreite einem Selektor direkt zugewiesen wird. Grundsätzlich ist diese Vorgehensweise auch mit reinem CSS denkbar, doch ohne den Einsatz eines Präprozessors wie Sass ist der Aufwand bei der Erstellung und der Pflege des Dokuments viel zu hoch. In diesem Beitrag möchte ich die elementare Funktionsweise von semantischen Rastern auf Basis von Sass beschreiben.

Beitrag zu Ende lesen

Sass: @for-Schleife zur Berechnung von Klassen-Selektoren im Gestaltungraster

Sass @for-Loop

In klassenbasierten CSS-Grids wird die Breite der Spalten im Gestaltungsraster mit Hilfe von Klassen gesteuert. Einen ausführlichen Artikel zu diesem Thema habe ich bereits veröffentlicht. Frameworks wie Bootstrap nehmen euch Arbeit ab, indem sie u.a. die Klassen und die jeweilige Breite vordefinieren. Mit Hilfe der @for-Schleifen in Sass könnt ihr euch ein individuelles System entwickeln. In diesem Beitrag archiviere ich das entsprechende Snippet.

Beitrag zu Ende lesen

Farben mit Sass verändern

Eine Website basiert normalerweise auf einem durchdachten Farbschema und einigen Farbabstufungen innerhalb der jeweiligen Farbe. Sass bietet umfangreiche Möglichkeiten, Farben zu manipulieren. Wenn der Sass-Code entsprechend vorbereitet wurde, ist es sogar möglich ein Design mit nur einer Variable komplett umzufärben – inkl. Helligkeitsabstufungen, Komplementärfarben etc.

Beitrag zu Ende lesen

Einstieg in Sass – SCSS zu CSS kompilieren

Die Umwandlung von SASS/SCSS-Dateien in CSS-Dateien nennt man Kompilierung (engl: compiling). Mit einigen simplen Befehlen in der Kommandozeile, oder mit Hilfe von Desktop-Apps könnt ihr festlegen, welche Dateien von Sass überwacht werden sollen. Wenn anschließend Änderungen am SCSS-Stylesheet vorgenommen werden, kompiliert Sass die Dateien im Hintergrund automatisch zu CSS. Ich beschreibe in diesem Beitrag wie die Kompilierung über die Kommandozeile funktioniert.

Beitrag zu Ende lesen

Sass mit Hilfe von Apps installieren und einrichten

Es existieren verschiedene Desktop-Anwendungen um Ruby und/oder Sass zu installieren, ohne dabei den Weg über die Kommandozeile gehen zu müssen. Ich möchte euch in diesem Beitrag die populären Anwendungen »Scout«, »CodeKit« und »Compass.app« vorstellen. Weitere Tools findet ihr auf der Website von Sass. Damit ihr alle Beispiele in diese Beitrag nachvollziehen könnt, empfehle euch zuvor den Beitrag zum Thema Sass-Kompilierung gelesen zu haben.

Beitrag zu Ende lesen