Utilisez un paramètre comme une balise dans un mixin

Question

Comment puis-je faire:

@mixin addMargin($el) { 
    $el { 
     margin-left: 5px; 
    } 
    $el:hover { 
     margin-left: 10px; 
    } 
} 

en utilisant SASS?

Merci pour votre aide

Answer 1

Dans un mixin, vous ne pouvez pas ajouter seulement des propriétés directement à un élément, mais vous pouvez également ajouter des règles:

@mixin addMargin { 
    margin-left: 5px; 

    &:hover { 
    margin-left:10px; 
    } 
} 

Notez que vous devez préfixer le :hover avec & afin que nous obtenons cette règle:

#something-with-the-mixin-applied:hover 

au lieu de

#something-with-the-mixin-applied :hover 

Answer 2

Utilisation interpolation:

@mixin addMargin($el) { 
    #{$el} { 
    margin-left: 5px; 
    } 
    #{$el}:hover { 
    margin-left: 10px; 
    } 
} 

@include addMargin(h1); 

Mais Yogu est juste, vous n'avez pas besoin ici. Vous pouvez omettre sélecteurs, ne laissant que des directives dans votre mixin, et appliquer le mixin dans un sélecteur:

@mixin addMargin { 
    margin-left: 5px; 

    &:hover { 
    margin-left:10px; 
    } 
} 

h1 { 
    @include addMargin; 
}