Combina il mixin di Sass e la classe CSS? - css, sass

Ho creato un mixin di Sass e una classe CSS che hanno lo stesso stile, quindi gli sviluppatori hanno la possibilità di aggiungere la classe all'HTML o applicare il mixin con Sass.

@mixin link-style-1 {
background: $red;
padding:  .75em 45px .75em 5%;
}
.link-style-1 {
background: $red;
padding:  .75em 45px .75em 5%;
}

C'è un modo per pettinare questi 2 in 1? so che potrei usare una variabile per il padding per entrambi, ma poi il mio codice diventerà un po 'più lungo e più difficile da leggere. C'è una soluzione più pulita?

risposte:

Si può solo includere il mixin nella classe per la secchezza:

@mixin link-style-1 {
background: $red;
padding:  .75em 45px .75em 5%;
}
.link-style-1 {
@include link-style-1;
}

Non c'è una vera ragione per essere un mixin: puoi usare un selettore di segnaposto e estenderlo per la classe.

%link-style-1 {
background: $red;
padding:  .75em 45px .75em 5%;
}
.link-style-1 {
@extend %link-style-1;
}

Quando lo fai, il segnaposto ("silenziosoclass ") non viene trasmesso al CSS, proprio come un mixin, tuttavia, ogni selettore che lo estende verrà combinato, invece di causare la duplicazione del codice come quella da un mixin.