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:

a {
    color: blue;
    
    &:focus,
    &:hover { color: red; }
}
a {
  color: blue;
}

a:focus, a:hover {
  color: red;
}

Weitere Infos in der Sass Dokumentation.

Da seit der Sass-Version 3.3 das ‚&‘ (Ampersand) auch am Anfang von Selektoren verwendet werden kann und ich dahingehend meine Schulungsunterlagen anpassen wollte, habe ich ein paar Tests gemacht. Hier mal eine Zusammenstellung von ein paar Möglichkeiten:

$componentname: 'block';

.#{$componentname} {
  $parent: &;

  // .block.block
  &#{&} { color: red; }
  
  // .block + .block
  & + & { color: purple; }

  // .block__element
  &__element { color: green; }
  
  // .block--modifier
  &--modifier {
    color: yellow;
    
    // .block--modifier__element
    &__element { 
      color: lime;
    }
    
    // .block--modifier .block__element
    #{$parent}__element { 
      color: blue; 
      
      // .block--modifier .block__element > .block__more
      > #{$parent}__more { color: white; }   
    }
  }
  
  // .block.block--no-img
  &#{&}--no-img { color: teal; }
  
  // div .block 
  div & { color: aqua; }
  
  // div.block .block
  div#{&} & { color: fuchsia; }
  
  // div.block 
  @at-root {
    div#{&} { color: gray; }
  }
}

Sassmeister „Codepen“:

Play with this gist on SassMeister.

Die Möglichkeiten für BEM-Klassen-Strukturen sind interessant. Ich möchte auch hier dazu keine Diskussion entfachen, darum geht es hierbei nicht. Ich weiß, dass einige Entwickler es nicht mögen, wenn BEM-Klassen mit ‚&‘, (z.B. &__element) zusammengesetzt in Sass verwendet werden, da es schwieriger ist bei der Suche im Projekt. Dennoch sehe ich dabei schon einige Vorteile und Sass wurde genau für das „DRY-Prinzip“ entwickelt.

Der Clou ist dabei ist, den Parent-Selektor in eine Sass-Variable innerhalb des Block zu referenzieren, also den Scope mitzuschleifen.

.block {
  $parent: &;
  
  &--modifier {
    color: yellow;
    
    #{$parent}__element {
      color: green;
    }
  }
}

Das ergibt folgenden Selektor:

.block--modifier .block__element {}

Kennt ihr noch mehr Tricks?

Flattr this!

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

Flattr this!

Flexbox Fallbacks

Aktuell bekomme ich des Öfteren eine Diskussion über den Einsatz von Flexbox in aktuellen Webprojekten mit. Häufiges Thema ist dabei, dass der IE9 Flexbox nicht unterstützt und aus diesem Grund lieber auf Flexbox verzichtet wird. Ich muss zugeben, dass ich seit mehreren Jahren in Mobile- oder Responsive-Projekten arbeite und dort nur äußerst selten noch IE9- oder IE8-Support benötigt wird. Somit kann ich schon länger fast ausschließlich Flexbox verwenden ohne einen Fallback inkludieren zu müssen. Deswegen kann ich die Diskussion vielleicht nicht so nachvollziehen, da Flexbox mittlerweile zu meinen täglichen Tools zählt. In diesem Blog-Post möchte ich mal ein paar typische Flexbox-Fallback-Möglichkeiten skizzieren.

Flexbox Fallbacks weiterlesen

Flattr this!

Responsive Navigation aus UX-Sicht

Optimierte Navigation bei mobilem Webdesign

Eines der komplizierteren Themen im Responsive Webdesign ist unbestritten die Navigation, gerade wenn ein Relaunch bestehender Inhalte geplant ist. Wird auf der vorhandenen Webseite eine umfangreiche Navigation (z. B. „Mega Dropdown“) verwendet, ist eine Anpassung auf kleinere Bildschirme eine herausfordernde Aufgabe. Hier gibt es keine Einheitslösung, es muss eine gut durchdachte Lösung gefunden werden. Beim Responsive Re-Design sollte es immer eine Anpassung von Inhalt (Content Strategy) und Navigationsstruktur geben, auch wenn dies sicherlich schwerfällt.
Responsive Navigation aus UX-Sicht weiterlesen

Flattr this!

Assemble – erste Schritte mit dem Static Site Generator für Grunt

Wie bereits im Artikel „Static Site Generators“ geschrieben, habe ich mich letztes Jahr projektbedingt mit Assemble beschäftigt. Assemble ist ein Static Site Generator für Grunt und nutzt Handlebars als Template-Engine.

tl;dr; „Warum ist mir egal, ich will Code sehen” => hier klicken

Mir persönlich nutzt ein Static Site Generator oft bei meinem täglichen Workflow, beim Erstellen von Klickdummys und Templates. Der Vorteil eines „Static Site Generator“ liegt auf der Hand: man nutzt die Dynamik einer Script-Sprache um wiederholende Elemente nicht jedes Mal neu schreiben zu müssen oder Markup mit dynamischen Daten zu vermischen. Man stelle sich vor, man muss bei einer statischen Seite einen Navigationspunkt ändern und das bei vielen Seiten, das ist aufwändig und fehleranfällig.

Assemble – erste Schritte mit dem Static Site Generator für Grunt weiterlesen

Flattr this!

Responsive iFrames

Responsive Retrofitting Teil 3

Ein Blogpost der nunmehr 3 Jahre auf Vollendung wartet, ist jetzt endlich fertig :)

Responsive iFrame? Das klingt schon falsch und ist auch ein schwieriges Pflaster. Grundsätzlich können iFrames responsive sein, Voraussetzung ist natürlich, dass sich deren Inhalt ebenfalls responsive verhält. Es ist ja quasi ein Browserfenster im Browserfenster. Doch die Anpassung der Breite ist nicht das Problem, die Anpassung der Höhe macht es kompliziert.

Responsive iFrames weiterlesen

Flattr this!

Content Source Order in RWD

Responsive Retrofitting Teil 2

Diese kleine Serie gibt ein paar Beispiele, wie man ein paar knifflige Aufgaben beim „responsive-fähig-machen” einer Desktop-Seite lösen kann.

Wie schon in Teil 1 zum Thema „Responsive Tabellen“, nochmals vorab der Hinweis, dass man bei einer umfangreicheren Seite mit neuer Code-Basis im Mobile-First-Modus starten sollte.

Ein häufiges Problem beim sogenannten „Responsive Retro Fitting”, also bestehende Desktop Webseiten „responsivefähig” zu machen, ist die visuelle Neuordnung von Inhalt, wenn man am bestehenden Markup nichts ändern kann/darf.

Content Source Order in RWD weiterlesen

Flattr this!

CSS clip-path

clip-path ist eine neue CSS-Eigenschaft, die wie viele andere CSS3-Eigenschaften ebenfalls den Ursprung in SVG hat. Wie bei shapes-outside kann man clip-path über Pfadfunktionen wie circle(), ellipse(), inset() oder polygon() eine Form zuweisen, die dann das Bild oder den Container in der jeweiligen Form beschneiden. Alles, was außerhalb der definierten Form ist, wird entfernt und der Hintergrund des Elternelements erscheint.

Die alte Eigenschaft clip gibt es zwar schon länger in CSS, wurde jetzt aber überarbeitet spezifiziert. Der aktuelle Einsatz von clip ist sicherlich ein anderer als ursprünglich angedacht. Meist nutzen Webworker clip für barrierefreies Verstecken von Elementen wie <input type="radio" /> um ein Custom-Design zu integrieren und gleichzeitig die Browser-Funktionen zu erhalten. Die HTML-Boilerplate nutzt dies in der .visuallyhidden Definition. CSS clip-path weiterlesen

Flattr this!

CSS Shapes – neue Formen braucht das Web

Die Welt ist eine Scheibe und das Web ist eckig… so ungefähr könnte man anfangen um in das Thema einzusteigen. Aber ihr wisst ja, dass es anders ist.

Nachdem wir mit CSS3 schon die Möglichkeit bekommen haben, die Ecken einer Box optisch abzurunden, bleibt natürlich eines offen – der Text bricht nach wie vor an der „geraden” Box-/Bildkante um, dass heißt er orientiert sich z.B. nicht an der Kante von border-radius, erst recht nicht am Inhalt des Bilds. Die eigentliche Box bleibt viereckig. Das ändert CSS-Shapes.

CSS Shapes – neue Formen braucht das Web weiterlesen

Flattr this!

Responsive Tabellen

Responsive Retrofitting Teil 1

Wenn wir mit bestehenden Inhalten planen müssen, kommt es oft vor, dass wir Daten-Tabellen responsive darstellen sollen. Diese Tabellen sind naturgemäß meist sehr schwierig auf kleinen Bildschirmen abzubilden, viele Tabellen sind sehr groß und enthalten viele Daten. Das rührt daher, dass Redakteure (bzw. diejenigen, die für den Inhalt verantwortlich sind) versuchen über Excel-Tabellen komplexe Daten abzubilden und die Daten so ins Web übernommen werden (sollen). In der Vergangenheit war der Platz auf großen Bildschirmen vorhanden, im Multi-Screen-Zeitalter und in einer responsiven Website heutzutage, meist nicht mehr.

Responsive Tabellen weiterlesen

Flattr this!