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
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é:
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 |
---|---|
@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; } } |