Sass Parent Selector – ‚&‘ (ampersand)

Für eine Schulung zum Thema „Sass“ habe ich einige Möglichkeiten zum Einsatz des so genannten „Parent Selector“ zusammen gestellt.

Kurz notiert – was macht der „Parent Selector“?
Der „Parent Selector“ referenziert in einer verschachtelten Regel den Eltern-Selektor und verbindet beim Kompilieren die Knoten zum endgültigen Selektor. Das ‚&‘ Ampersand dient als Platzhalter. Hier ein einfaches Beispiel:

Sass Parent Selector – ‚&‘ (ampersand) weiterlesen

Nützliche PostCSS-Module

Gibt es die überhaupt, wird sich so mancher denken… und die Antwort ist wie immer – it depends™. Natürlich gibt es nützliche PostCSS-Module, die Entwicklern beim Schreiben von CSS unterstützen, für andere passt es eher nicht in den Workflow. Nur weil es das jetzt gibt, heißt es nicht, dass jeder Webworker es gleich einsetzen muss. Dennoch denke ich, dass bei vielen mindestens ein PostCSS-Modul Einzug in den Build-Prozess gefunden hat, nämlich Autoprefixer.

Nützliche PostCSS-Module weiterlesen

Styleguide generieren mit Sass & Grunt

Ein in größeren Projekten immer wichtiger werdendes Thema ist in meinen Augen ein Styleguide, der einerseits als Dokumentation und andererseits für externe Dienstleister als Referenz genutzt werden kann.

Früher™ als man das Design ausschließlich in Photoshop machte, wurde natürlich auch der Styleguide in Photoshop erstellt — mit Bemaßung LOL! Diese Vorlage sollten Webentwickler dann nutzen, um ein Design möglichst pixelgenau umzusetzen. Ich kann mich an keinen „Styleguide“ erinnern, der zu 100% stimmte. Häufig waren Fehler in der „Bemaßung“ oder in Farbwerten… ihr kennt das.

Styleguide generieren mit Sass & Grunt weiterlesen

Mobile First & IE8 Fallback mit Sass (Teil2)

Im ersten Teil Mobile First & IE8 Fallback mit Sass ging es darum, wie man mit dem IE8 umgeht, wenn man CSS und Media Querys nach dem „Mobile First“ Prinzip erstellt. Das Mixin-Plugin Sass-IE hilft dabei ein gesondertes Stylesheet für den IE8 ohne @media Angaben zu generieren. Die Lösung hat jedoch ein paar Schwächen, so können z.B. Media Querys nur für einen Wert (min-width bzw. max-width) und ein Medium (@media screen …) generiert werden. Es ist also nicht möglich ein Media Query für zwei Werte zu schreiben. Leider geht @media screen and (min-width: 450px and max-width: 650px) damit nicht.
Mobile First & IE8 Fallback mit Sass (Teil2) weiterlesen

Mobile First & IE8 Fallback mit Sass

Um die Begriffsklärung „Mobile First“ soll es heute nicht gehen. Das ist teils eine philosophische Frage und viele behaupten zurecht, bevor man sich über Design und die Umsetzung Gedanken macht, sollte der Content, für den man gestaltet, vorliegen — also quasi „Content First“. Für viele hat aber „Coffee First“ am Morgen eines Arbeitstages die höchste Priorität. ;)

In dem Artikel geht es um die technischen Möglichkeiten für den Internet Explorer 8 automatisiert eine optimierte ähnlich gute Ansicht der Responsive Website zu generieren.
Mobile First & IE8 Fallback mit Sass weiterlesen

Individuelle responsive Gridsysteme mit Sass

Für Responsive Webdesign ist ein Gridsystem der Grundstock um den Inhalt auf vielen verschiedenen Ausgabegeräten flexibel auszugeben. Gridsysteme sind mittlerweile unbedingt notwendig um ein Design zielgenau (nicht pixelgenau) umzusetzen. Um genau zu sein, sollte das Design bereits einem Raster folgen, das dann in der Entwicklung so umgesetzt wird.

Individuelle responsive Gridsysteme mit Sass weiterlesen

Sass & Compass Introduction

Meine Workshop-Slides „Modern Frontend Development with Sass & Compass“ sind nun online verfügbar.

Der drei Stunden Workshop, den ich bei den TYPO3 Developer Days in München gegeben habe, habe ich am letzten Samstag auch nochmal beim TYPO3camp Stuttgart wiederholt. Im Workshop ging es um die ersten Schritte mit Sass & Compass, sowie die hilfreichsten Features vorzustellen und einen Ausblick auf die neue Sass Version 3.2 zu geben.

Bei Fragen, pingt mich gern auf Twitter dazu an, kommentiert hier im Blog oder schreibt mir eine E-Mail

Compass & SASS – CSS3 Adventskalender Tag 17

Natürlich beschäftigt sich der diesjährige CSS3 Adventskalender auch mit dem Thema SASS & Compass. Was SASS & Compass so effizient macht beim Schreiben von CSS hat Mathias Schäfer (molily) bereits sehr umfassend im Webkrauts-Adventskalender-Artikel „Effiziente CSS-Entwicklung mit Sass und Compass“ (Teil 1, Teil 2) gezeigt.

Neue Techniken bringen natürlicherweise auch viel Diskussion mit sich. Und nur weil man einen Pre-Processor wie SASS verwendet, schreibt man nicht automatisch besseres CSS. Es muss schon ein gewisses Verständnis von CSS vorhanden sein, damit SASS, LESS, Stylus, Closure und MyNewCssPreProcessor™ auch effizient eingesetzt werden kann.
Compass & SASS – CSS3 Adventskalender Tag 17 weiterlesen