Sass Mixin und CSS-Klasse kombinieren? - Css, Sass

Ich habe ein Sass-Mixin und eine CSS-Klasse mit demselben Stil erstellt. Entwickler haben also die Möglichkeit, die Klasse entweder dem HTML-Code hinzuzufügen oder das Mixin mit Sass anzuwenden.

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

Gibt es eine Möglichkeit, diese 2 zu 1 zu kämmen? Ich weiß, ich könnte eine Variable für die Auffüllung für beide verwenden, aber dann wird mein Code etwas länger und schwerer zu lesen. Gibt es eine sauberere Lösung?

Antworten:

Sie können das Mixin einfach in die Klasse für DRYness aufnehmen:

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

Es gibt keinen wirklichen Grund dafür, ein Mixin zu sein. Sie könnten einen Platzhalter-Selektor verwenden und diesen für die Klasse erweitern.

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

Wenn Sie dies tun, wird der Platzhalter ("stumm")Klasse ") wird nicht an CSS ausgegeben, ähnlich wie bei einem Mixin; jeder Selektor, der es erweitert, wird jedoch kombiniert, anstatt Code-Duplikate aus einem Mixin zu erzeugen.