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!

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!

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!

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

Flattr this!

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

Flattr this!