Mixins sind eine Art von Templates, Presets oder auch Pseudofunktionen. Diese ermöglichen ein schnelleres Schreiben von SCSS bzw. CSS, da dir diese Mixins Arbeit abnehmen können.
Der Unterschied zwischen SCSS Funktionen und Mixins ist, dass Funktionen nur Werte zurückgeben können und Mixins können ganze Strukturen direkt ausgeben.
SASS ist ein CSS-Präprozessor, das heißt, eine SASS- bzw. SCSS-Datei wird durch den SASS Compiler in eine CSS-Datei kompiliert. Mehr zu den SASS Basics findest du im Artikel "Was ist SASS/SCSS? Wie hilft es mir?"
Falls ihr schnell und einfach den Inhalt dieses Artikels testen wollt, kann ich euch den Sass Playground SassMeister empfehlen. Dort könnt ihr online SASS bzw. SCSS zu CSS Kompilieren.
Vor allem zum schnellen Ausprobieren ist das sehr hilfreich. Ich Empfehle den dart-sass Compilier auszuwählen, damit sind alle Beispiel aus diesem Artikel kompatible.
Ein Mixin ist eine Struktur/Funktion, die Inhalte bereitstellt, die sich wiederholen können. Diese können Parameter haben oder auch optionale Parameter und können sogar, ähnlich wie Selektoren, Inhalte haben.
Als Beispiel habe ich mal ein kleines Mixin geschrieben. Dieses ist dazu da, eine Linie am unteren Rand von einem Element zu erstellen. Natürlich macht das so wenig Sinn, ohne Parameter und Berechnungen, dann könnte man das ganze auch mit einem Placeholder-Selektor realisieren.
@mixin line(){
border-bottom: 1px solid black;
}
%line{
border-bottom: 1px solid black;
}Wenn man diese beiden nun auf ein Element anwendet, wie in diesem Beispiel, sehen wir, dass dieses das exakt selbe Resultat ergibt. Heißt also, für einfache Elemente wie diese hier, lohnen sich Mixins definitv nicht. Interessant wird das ganze, sobald Parameter übergeben werden.
Ein Mixin wird mit dem @include Befehle eingebunden. Und der Aufruf danach sieht ähnlich einer Funktion in Programmiersprachen aus. Des weiteren kannst du dort später eben auch Parameter übergeben, das schauen wir uns später noch einmal genauer an!
.box-teaser{
@include line();
}
.box-teaser-2{
@extend %line;
}.box-teaser {
border-bottom: 1px solid black;
}
.box-teaser-2 {
border-bottom: 1px solid black;
}Um Mixins so richtig nützlich zu machen, kann man Parameter einsetzen. Im Beispiel haben wir nun ein Mixin für einen Button, das 4 Parameter erwartet, mit denen gearbeitet werden kann. Unter anderem kann man auch Werte doppelt verwenden, wie zum Beispiel $size und auch mit diesem Wert noch rechnen, um bestimmte Elemente in Relation zueinander zu setzen.
Der Kreativität sind hier natürlich keine Grenzen gesetzt! Zum Beispiel kannst du auch die Sass Color Functions nutzen um den Hover, Active und Focus noch anderweitig Farben abhängig von der Hintergrundfarbe zu geben.
@mixin btn($color,$font-color,$size,$radius){
background: $color;
color: $font-color;
font-size: $size;
border-radius: $radius;
padding: $size/2;
transition: background 0.2s;
&:hover{
background: rgba($color,0.6);
}
}.btn{
@include btn(red,#fff,18px,10px);
}
.btn-2{
@include btn(blue,#f2f2f2,20px,5px);
}.btn {
background: red;
color: #fff;
font-size: 18px;
border-radius: 10px;
padding: 9px;
transition: background 0.2s;
}
.btn:hover {
background: rgba(255, 0, 0, 0.6);
}
.btn-2 {
background: blue;
color: #f2f2f2;
font-size: 20px;
border-radius: 5px;
padding: 10px;
transition: background 0.2s;
}
.btn-2:hover {
background: rgba(0, 0, 255, 0.6);
}Manchmal ergibt es Sinn einen Wert vorher zu definieren, da du ihn eigentlich meistens gleich brauchst. Aber du willst dann doch die Option haben diesen anders definieren zu können? Kein Problem, dafür gibt es optionale Parameter. Ein Beispiel mit unserem Button könnte so aussehen. Dabei wird der Wert der, ein optionaler Parameter sein soll mit einem Doppelpunkt ein Standardwert bekommen. Wichtig ist, optionale Parameter sollten immer am Ende der Definition stehen, da man keine Parameter überspringen kann. Allerdings kannst du Argumente auch mit Namen übergeben, um die Reihenfolge zu ignorieren. Meistens ist es aber doch einfacher, die optionalen Parameter am Ende zu definieren.
@mixin btn($color,$font-color,$size,$radius: 5px){
background: $color;
color: $font-color;
font-size: $size;
border-radius: $radius;
padding: $size/2;
transition: background 0.2s;
&:hover{
background: rgba($color,0.6);
}
}Manchmal wollen wir Buttons erstellen die alle eine andere Farbe haben, aber sonst doch relativ gleich sind. Also warum nicht mit einer unbekanten Parameteranzahl arbeiten in Mixins.
Wichtig dafür ist, dass in deinem Kompilierer die Sass Meta Extension drinnen ist. Der Neuste Compiler ist der Dart Sass Compilier, der hatte in meinem Test keine Probleme mit dieser Funktionalität.
@use "sass:meta";
@mixin btn-color($args...){
@each $name, $color in meta.keywords($args) {
.btn-#{$name} {
color: $color;
}
}
}
@include btn-color(
$red: red,
$blue: blue,
$pink: pink,
).btn-red {
color: red;
}
.btn-blue {
color: blue;
}
.btn-pink {
color: pink;
}Manchmal gibt es den Fall, dass man komplexe Selektoren hat und diese nicht immer wieder anpassen möchte. So hab ich zum Beispiel im Artikel "Externe und Interne Links Kennzeichnen", ein Komplexen Selektor vorgestellt, mit dem es möglich ist, diese Links zu erkennen und entsprechend zu Stylen. Diesen Selektor jedes Mal neu zu schreiben macht nicht wirklich Spaß also habe ich dafür auch noch ein Mixin angelegt. Durch den @content Befehle können wir das Mixin wie eine Art Selektor verwenden.
@mixin externLink($domain) {
a[href^="http://" i]:not([href*="#{$domain}" i]),
a[href^="https://" i]:not([href*="#{$domain}" i]){
@content;
}
}@include externLink("hellocoding.de"){
text-decoration:none;
padding: 20px;
display: block;
color: #fff;
font-family: sans-serif;
background: green;
}Abschließend hab ich noch ein paar Mixins erstellt bzw. herausgesucht aus meinen Webseiten die ich immer wieder gerne verwende. Um euch noch mal etwas Inspiration zu geben, was ihr so alles mit Mixins machen könnt.
Das Button Mixin habe ich ja bereits ausgiebig präsentiert. Nun hab ich das ganze mit unserem Wissen noch etwas erweitert und verbessert. Unter anderem mit einer Selektor Variable und einem Content Bereich ergänzt.
@mixin btn($selector,$color,$font-color,$size: 18px,$radius: 5px){
#{$selector}{
background: $color;
color: $font-color;
font-size: $size;
border-radius: $radius;
padding: $size/2;
transition: background 0.2s;
@content;
&:hover{
background: rgba($color,0.6);
}
}
}
@include btn('a.btn',red,#fff){
text-decoration: underline;
}a.btn {
background: red;
color: #fff;
font-size: 18px;
border-radius: 5px;
padding: 9px;
transition: background 0.2s;
text-decoration: underline;
}
a.btn:hover {
background: rgba(255, 0, 0, 0.6);
}Manche Funktionen arbeiten noch mit Vendor Prefixes, wobei diese Funktion nach und nach immer mehr durch Flag-Einstellungen im Browser verschwinden. Für manche sind diese noch notwendig, dafür gibt es natürlich auch sogenannte Autoprefixer, die gezielt für bestimmte Features die Prefixes hinzufügen beim Kompilieren der SCSS-Datei.
Falls du aber diese vielleicht auch gezielt einsetzen möchtest, kannst du dir mit einem Mixin die Arbeit vereinfachen. Das nachfolgende Beispiel könntest du z. B. auch in unserem Button Mixin nutzen für die Transition.
@mixin vendor($style,$value) {
-webkit-#{$style}: $value;
-moz-#{$style}: $value;
-ms-#{$style}: $value;
-o-#{$style}: $value;
#{$style}: $value;
}.btn{
@include vendor('transition',background 2s);
}.btn {
-webkit-transition: background 2s;
-moz-transition: background 2s;
-ms-transition: background 2s;
-o-transition: background 2s;
transition: background 2s;
}Natürlich gibt es auch hier wieder "Frameworks" bzw. Sammlungen von Mixins, die du direkt in deine SCSS importieren kannst, um weitere Möglichkeiten zu haben. Beachten dabei sollte man, dass das Kompilieren länger dauern kann, umso mehr man einbindet. Aber die CSS Datei wird ja nicht unnötig größer, da nur die Mixins an den stellen, wo sie eingesetzt werden, entsprechend den Code vergrößern. Also bleiben die üblichen Probleme, die man z. B. bei CSS Frameworks oder JS Frameworks hat aus und man kann ohne Problem damit arbeiten, sofern man das denn will. Natürlich kannst du auch dir mit dir Zeit deine eigene Sammlung zusammen kopieren und so hast du nur die für dich Relevanten!
Family.scss vereinfacht das Arbeiten mit nth-child Selektoren. So können zum Beispiel die ersten 3 oder letzten 3, oder alle aber nicht das 3 total einfach selektiert werden.
Zum Beispiel kannst du mit all-but-first-last alle Elemente in der Mitte ausschließlich der ersten 2 und Letzten 2 die Elemente Selektieren. Weitere Beispiel findest du auf der Webseite von Family.scss.
LukyVj/family.scss
Family.scss is a set of Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy way.
Viele CSS Frameworks wie Bootstrap sind zum Beispiel in SCSS geschrieben und bringen so natürlich auch etliches an Mixins mit. Weshalb du dort natürlich auch nach Inspiration schmökern kannst.
Die Bootstrap Mixins findest du hier: https://github.com/twbs/bootstrap/tree/main/scss/mixins
Das Foundation Framework ist zum Beispiel auch in SCSS und bringt einige Mixins mit: https://github.com/foundation/foundation-sites
Mixins sind eine tolle Möglichkeit, um dir das Schreiben von CSS noch weiter zu vereinfachen und zu kürzen, da du nicht immer alles wieder neu schreiben muss. Anhand des Button Mixins hab ich dir die Funktionalität und Möglichkeiten von Mixins näher gebracht. Viel Spaß, wenn du jetzt dein SCSS mit Mixins noch besser machst!
Hinterlasse mir gerne einen Kommentar zum Artikel und wie er dir weitergeholfen hat beziehungsweise, was dir helfen würde das Thema besser zu verstehen. Oder hast du einen Fehler entdeckt, den ich korrigieren sollte? Schreibe mir auch dazu gerne ein Feedback!
Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Gestalte dein SCSS/SASS mittels Mixins noch Effizienter!"!
