Optische Varianzen mit SCSS-Maps umsetzen

in  Basics , , , ,

Optische Varianzen mit SCSS-Maps umsetzen
In vielen Weblayouts ist es notwendig, unterschiedliche Ausprägungen einer bestimmten kosmetischen “Stellschraube” zu realisieren. So können etwa einzelne Akzentfarben je nach Unterseite, Kategorie oder Jahreszeit abweichen. Dies sorgt oftmals für unschönen Boilerplate-Code, welcher jedoch mit SASS/SCSS einfach eingespart werden kann. Erst einmal ausführlich Angenommen, je nach body-Klasse sollen alle Artikel-Überschriften in der zweiten Ebene eine andere Farbe erhalten. Dies könnte mit reinem CSS zum Beispiel so aussehen: 1 2 3 4 5 6 7 8 9 10 11 12 body.

CSS-Konzepte spielerisch lernen

in  Basics , , , ,

CSS-Konzepte spielerisch lernen
Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten. Mit der Umstellung von Bootstrap 3 auf Bootstrap 4 kommt man jedoch nicht umhin, sich mit dem Flexbox-Konzept auseinander zu setzen. Hier kommt man mit den alten Floats nicht mehr weit. Am Anfang ist das ein ungewohntes Umdenken. Aber sobald man Flex einmal verstanden hat, möchte man auch nicht mehr ohne.

Prägnante und strukturierte Stylesheets mit SCSS

in  Basics , , ,

Prägnante und strukturierte Stylesheets mit SCSS
Auch wenn es für einige Leser ein alter Hut ist, so gibt es dennoch sicherlich andere, die noch keine Erfahrungen mit Less oder Sass haben. Daher sei einmal das sehr leicht zu erlernende SCSS (Sassy CSS) vorgestellt, mit dem sich stufenlos Sass-Funktionen in CSS einfügen lassen. Der Einstieg Bereits die grundlegenden Funktionen, wie Variablen und Verschachtelung, helfen dabei, die Stile deutlich einfacher zu handhaben. Redundanzen werden vermieden und die Änderbarkeit erhöht.