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!

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 Images – width/height-Attribute entfernen, lazy loading & padding-bottom Trick

Für das Einbinden von Bildern im Responsive Webdesign wird häufig empfohlen die ‚width‘- und ‚height‘-Attribute im HTML-Quellcode zu entfernen. Das ist aber nicht nötig und meiner Meinung nach auch nicht gut in Hinblick auf hochauflösende Bilder.

Mit CSS kann man die im HTML festgelegten Breiten überschreiben und die Bilder so flexibel machen.

Responsive Images basics:

img {
  max-width: 100%;
  height: auto;
}

Das Bild passt sich somit immer dem Container an, wird aber nie größer als seine eigentliche Originalgröße in Pixel. Das dürfe sicherlich bekannt sein. Wenn das nicht funktioniert, liegt ein anderer „Fehler“ vor, wie ein anderer BFC durch ‚float‘ oder ähnliches.

Responsive Images – width/height-Attribute entfernen, lazy loading & padding-bottom Trick weiterlesen

Flattr this!

Static Site Generators

Anfang letzten Jahres habe ich mir überlegt, wie ich meine hauptsächliche Arbeit beschleunigen und verbessern kann. Mein aktueller Job besteht zumeist darin, Responsive Webdesigns in HTML-Templates umzusetzen, die dann im Anschluss in der Software-Entwicklung weiter verarbeitet werden. Manchmal sind es Templates für Content-Management-Systeme, oft ist es aber auch die Grundlage für Java-betriebene Webseiten. Ich habe überlegt, wie ich schnell und flexibel statische HTML-Templates generieren, gleichzeitig mit Sass (Compass) entwickeln und ein Browser-Reload (Live-Reload) machen kann. Einige Systeme habe ich mir angeschaut und möchte kurz meine Erfahrung teilen.

Static Site Generators weiterlesen

Flattr this!

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

Flattr this!

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

Flattr this!

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

Flattr this!

IE-Debugging via VirtualBox mit modern.ie

Alltag für Webentwickler dürfte das Testen der Webseiten im Internet Explorer sein. Wo hingegen bei Firefox oder Chrome es einen kürzeren Releasezyklus gibt, wurde der IE in den letzten Jahren sehr selten erneuert. Das Problem ist (wie beim Safari) dass das Browser-Upgrade ans Betriebssystem geknüpft ist. Hinderlich ist es auch, das man nicht mehrere IE-Versionen parallel installieren kann. Früher™ hatte man sich mit IETester beholfen um gleichzeitig mehrere IEs zu testen. Bereits seit IE8 kann man das Rendering in den IE-Developer-Tools umstellen und die Seite in einer älteren IE-Version gerendert betrachten. Das reicht auch oft für den ersten Eindruck, ist aber nicht so verlässlich wie eine isolierte Version von Browser und Betriebssystem. Zudem kann man am Mac keinen IE installieren. Im Netz gibt es zwar einige Tools wie IE NetRenderer, die Screenshots von IE-Versionen generieren. Das hilft aber nicht weiter wenn man einen Darstellungsfehler entdeckt, Debugging ist natürlich nicht möglich.

IE-Debugging via VirtualBox mit modern.ie weiterlesen

Flattr this!

Lange nix gehört von dir

Es war lange ruhig gewesen hier im Blog und ich kann auch nicht versprechen, dass sich das jetzt wieder ändern wird. Themen über die man bloggen könnte gibt es genug, so ist es nicht, aber mir hat in den letzten Monaten absolut die Zeit gefehlt (sadpanda). Erschwerend kam noch hinzu, dass ich der Seite auch längst einen neuen responsiven Anstrich verleihen wollte. Dazu bin ich leider auch noch nicht gekommen. Ich bin zu sehr mit Aufträgen und Schulungen beschäftigt, dass dafür Zeit blieb. Und Familie hab ich auch, die wollen mich auch ab und zu auch sehen. Ihr kennt das. Da ich aber an allen Ecken und Enden was zu Responsive Webdesign erzähle, hat es mich umso mehr geärgert, dass mein Blog noch im 2008er Design war – ich wollte auch nix über Responsive Webdesign im alten, fixen Layout veröffentlichen.

Anfang der Woche hab ich dann ein WordPress-Update gemacht und dabei das neue responsive Default-Theme gesehen. Na klar, ich hätte das Theme lieber selbst erstellt, aber wie eingangs bereits erwähnt, fehlt mir aktuell absolut die Zeit. Deshalb hab ich das jetzt übergangsweise aktiviert (und werde es nach und nach noch ein wenig pimpen). Morgen wird es einen neuen Artikel geben, der mir schon länger unter den Nägeln brennt.

Heute hatte ich auch die neue T3N im Briefkasten, da gibt es einen Artikel von mir über den „Responsive Workflow“ zu lesen. Im Wesentlichen ist das inhaltlich der Vortrag „Responsive Webdesign Process„.

Also, danke fürs dran bleiben und stay tuned!

Flattr this!

The Responsive Webdesign Process

Bei der TYPO3 Conference (T3CON12DE) in Stuttgart hatte ich die Gelegenheit einen Vortrag über den neuen Prozess in Responsive Webdesign Projekten zu sprechen. Meiner Meinung nach muss sich bei RWD Projekten der Workflow vom üblichen „Waterfall“ Prinzip zu einem iterativen Prozess ändern. Einen Großteil der Arbeit in Responsive Webdesign Projekten sehe ich eher in konzeptionellem Bereich, als in der Programmierung selbst. Vielleicht ist auch mal ein ausführlicher Artikel zum Thema notwendig, hier aber erstmal die Slides: http://maddesigns.de/rwd-process/

Flattr this!