Extend

La règle @extend permet de définir une classe ayant les mêmes règles de style qu'une autre classe spécifiquement.

Par exemple, une classe de message pourrait ressembler à ceci:

.msg { border-left-width: 4px; border-style: solid; border-color: blue; padding: 20px; background-color: lightBlue; } Ça donnerait un peu comme l'exemple ci-compte pour un bloc avec la classe .msg

Si d'autres types de messages doivent ensuite être créés et qu'ils doivent partager les mêmes styles de bases que .msg, il serait possible d'étendre (extend) cette classe plutôt que de réécrire à chaque fois le même code.

Par exemple:

.msg-alert { @extend .msg; border-color: red; background-color: lightPink; } .msg-warning { @extend .msg; border-color: yellow; background-color: lightYellow; } .msg-alert .msg-warning

Ce qui, une fois compilé en css, générerait le code suivant:

.msg, .msg-alert, .msg-warning { border-left-width: 4px; border-style: solid; border-color: blue; padding: 20px; background-color: lightBlue; } .msg-alert { border-color: red; background-color: lightPink; } .msg-warning { border-color: yellow; background-color: lightYellow; }

Les trois messages partageraient donc le même border-width, le même border-style et le même padding tandis que la couleur de fond et la couleur de bordure serait écrasées pour chaque variation.

@extend Placeholder

Parfois il est pratique de définir des règles qui peuvent être étendues sans pour autant que ces règles existent en soi sur une classe ou un sélecteur quelconque, d'où l'utilité des %placeholder. Ces règles commencent avec un % et ne génèrent aucun code à moins d'être étendues.

Par exemple, l'exemple précédent pourrait être réécrit avec un placeholder afin d'éviter que la couleur de fond bleue soit écrasée par les variantes de messages:

%msg { border-left-width: 4px; border-left-style: solid; padding: 20px; } .msg { @extend %msg; border-left-color: blue; background-color: lightBlue; } .msg-alert { @extend %msg; border-left-color: red; background-color: lightPink; } .msg-warning { @extend %msg; border-left-color: yellow; background-color: lightYellow; }

Ce qui générerait le code suivant:

.msg, .msg-alert, .msg-warning { border-left-width: 4px; border-left-style: solid; padding: 20px; } .msg { border-left-color: blue; background-color: lightBlue; } .msg-alert { border-left-color: red; background-color: lightPink; } .msg-warning { border-left-color: yellow; background-color: lightYellow; }

Les placeholders sont particulièrement utiles en ce qui à trait aux règles de styles que nous utilisons régulièrement.

Par exemple, je sais que je centre régulièrement des éléments via transform. Plutôt que de tapper à chaque fois:

.element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Je me créé donc régulièrement un placeholder similaire à ceci:

%centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Et je l'utilise sur mes éléments que je désire centrer ainsi:

.element { @extend %centered; } Placeholder Limitations

Une règle de style ne peut être étendue (extend) QUE si elle se trouve dans le même contexte que sa définition.

Autrement dit, une règle de style définie à la base d'un fichier ne peut pas être étendue à l'intérieur d'une media query à moins d'être définie à nouveau dans ce contexte (à l'intérieur de accolade de la media query).