RWD - % placeholder selectors et @extend

Source: http://thesassway.com/intermediate/understanding-placeholder-selectors

Sélecteurs d'espace réservé (placeholder selector)

Sass fournit un certain nombre de façons différentes de partager le code entre les règles CSS. Vous pouvez utiliser mixins pour insérer de nouvelles propriétés et / ou des règles CSS dans votre CSS et vous pouvez utiliser @extend pour partager des propriétés CSS entre les sélecteurs.
Sass 3.2 introduit un nouveau concept appelé "espaces réservés" qui optimise la sortie CSS de la directive @extend

La directive @extend

nous permet ici de déclarer que .error-icon et .info-icon devrait hériter des propriétés du sélecteur .icon
SCSS compile le CSS
.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend .icon;
  /* error specific styles... */
}

.info-icon {
  @extend .icon;
  /* info specific styles... */
}
.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

Si le .icon n'est jamais utilisé tout seul (n'est là que pour extend), alors le css généré n'est pas optimal (style non utilisé). Et c'est pour cela qu'ont été créés (sass 3.2) les

Sélecteurs d'espaces réservés ( %ex)

Ils ressemblent à des sélecteurs de classe mais de la forme %nom (et non .selclass). Ils n'apparaissent pas dans le CSS généré, seuls les sélecteurs qui les étendent seront inclus dans la sortie.

Voici le tableau précédant amélioré:

 .error-icon et .info-icon héritent (optimal) de  .icon
SCSS compile le CSS
%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @extend %icon;
  /* error specific styles... */
}

.info-icon {
  @extend %icon;
  /* info specific styles... */
}
.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  /* error specific styles... */
}

.info-icon {
  /* info specific styles... */
}

Extend vs include

Ces placeholder selectors, c'est pas comme un mixin mais sans paramètre? Le CSS généré sera complètement différent, meme si fonctionnellement parlant, c'est proche.

SCSS CSS
Voici le meme exemple d'icones, mais avec mixins
@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}

.error-icon {
  @include icon;
  /* error specific styles... */
}

.info-icon {
  @include icon;
  /* info specific styles... */
}
.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* error specific styles... */
}

.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* info specific styles... */
}

Limites de @entend - blocks @media

Une militation de @extend et des "placeholder selectors" est que cela ne fonctionne pas entre les règles dans des blocs @media :

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
@media screen {
  .error-icon {
    @extend %icon;
  }
  .info-icon {
    @extend %icon;
  }
}

donne une erreur de compilation:

You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend %icon" on line 8 of icons.scss

Ce n'est pas un bug. Car comme @extend ajoute les sélecteurs sans dupliquer les propriétés => on ne peux pas l'utiliser dans les @media

Les requètes media entourant le placeholder selector seront appliquées aux sélecteurs qui l'étendent :

@media screen {
  %icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}

.error-icon {
  @extend %icon;
}

.info-icon {
  @extend %icon;
}
@media screen {
  .error-icon, .info-icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}