Sass peut en quelque sorte être un peu une boîte noire, en particulier pour les jeunes développeurs: vous mettez des choses, vous en sortez. Prenez la référence du sélecteur ( &) par exemple, c'est un peu effrayant.
Cela étant dit, il n'est pas nécessaire que ce soit comme ça. Nous pouvons rendre sa syntaxe plus conviviale avec rien de plus que deux mixins très simples.
Événements
Lorsque vous écrivez Sass, vous vous retrouvez souvent à écrire des choses comme ceci:
.my-element ( color: red; &:hover, &:active, &:focus ( color: blue; ) )Assez fastidieux et pas forcément facile à lire. Nous pourrions créer un petit mixin pour le rendre plus simple.
/// Event wrapper /// @author Harry Roberts /// @param (Bool) $self (false) - Whether or not to include current selector /// @see https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts @mixin on-event($self: false) ( @if $self ( &, &:hover, &:active, &:focus ( @content; ) ) @else ( &:hover, &:active, &:focus ( @content; ) ) )Réécrire notre exemple précédent:
.my-element ( color: red; @include on-event ( color: blue; ) )Beaucoup mieux, non?
Maintenant, si nous voulons inclure le sélecteur lui-même, nous pouvons définir le $selfparamètre sur true. Par exemple:
.my-element ( @include on-event($self: true) ( color: blue; ) )Cet extrait de code SCSS donnera:
.my-element, .my-element:hover, .my-element:active, .my-element:focus ( color: blue )Contextes
Dans le même esprit, il n'est pas rare de styliser un élément en fonction du parent qu'il a. Par exemple, quelque chose comme ceci:
.my-element ( display: flex; .no-flexbox & ( display: table; ) )Rendons à nouveau la syntaxe un peu plus conviviale avec un simple mixin:
/// Contexts /// @author Hugo Giraudel /// @param (String | List) $context @mixin when-inside($context) ( #($context) & ( @content; ) )Réécrire notre exemple précédent:
.my-element ( display: flex; @include when-inside('.no-flexbox') ( display: table; ) )