Comment redéfinir un mixin existant tout en conservant la sortie d'origine?

Question

Disons que je l'mixin suivante:

@mixin foo { 
    color: red; 
} 

Ce mixin est importé dans une bibliothèque, donc je ne veux pas toucher le code source. Je veux cependant étendre la fonctionnalité du mixin, et y ajouter mes propres styles.

donc je besoin d'un moyen de créer une nouvelle mixin avec le même nom, tout en conservant la sortie originale mais me permettant d'ajouter une nouvelle sortie, quelque chose comme:

@mixin foo { 
    color: blue; 
} 

@mixin foo { 
    @include foo; // this is the original 
    font-size: 14px; 
} 

Bien sûr, le fera pas au-dessus de ce Je veux, mais y a-t-il quelque chose que je puisse faire?

Answer 1

Je joue autour et est venu avec ce qui semble fonctionner:

@mixin foo() { 
    color: red; 
} 

%foo { 
    @include foo; 
} 

@mixin foo() { 
    @extend %foo; 
    font-size: 22px; 
} 

.foo { 
    @include foo; 
} 

Answer 2

Vous pouvez étendre/changement de bloc de code d'un mixin en utilisant @content; pendant que vous avez des lignes à l'intérieur par défaut.

@mixin foo(){ 
    background:green; 
    border:solid 5px black; 
    @content; 
} 
div{ 
    width:200px; 
    height:100px; 
    &.one{ 
    +foo(){ 
     border:0; 
    } 
    } 
} 

https://jsfiddle.net/Thielicious/hhb09b61/