SCSS - Funktionen
1. Der feine Unterschied
Im Gegensatz zu Mixins arbeiten Funktionen fast genau so wie in anderen Sprachen. Die Definition erfolgt über @function und der Rückgabewert
mit @return.
Ein Hinweis
SCSS bietet uns davon ein wahres Füllhorn an Möglichkeiten an. Da ich aber mit vielen noch nie zu tun hatte und einige in meinen Augen überflüssig wie ein Kropf(f) sind, konzentriere ich mich ausschließlich auf das, was ich schon genutzt habe, die grundsätzlichen Rechenfunktionen. Die komplette Liste findet ihr hier.
2. Ein Beispiel
@function getSum($var1,$var2) {
@return $var1 + $var2;
}
.bla {
width: getSum(500px,1150px);
}
/* wird zu */
.bla {
width: 1650px;
}
Alternativ kann man das auch so schreiben:
@function getSum($var1,$var2) {
$sum: $var1 + $var2;
@return $sum;
}
3. Maßeinheiten
Und da fangen die Probleme auch schon an. Gut gedacht, schlecht umgesetzt. Ok, einige Sachen sind logisch, aber einige nicht. Darum stell ich euch mal ein paar Regeln vor, die beherzigen müsst.
Addition
Keine Maßangaben in den Parametern, keine Maßangaben im Ergebnis!
width: getSum(50, 25);
/* ergibt */
width: 75;
Maßangaben müssen in den Parametern identisch sein
width: getSum(50%, 25px);
/* wirft einen Fehler aus */
Bei mehreren Parametern muss man nur einmal eine Maßeinheit angeben.
width: getSum(50px, 25);
width: getSum(50, 25px);
/* ergibt beide Male */
width: 75px;
width: getSum(50%, 25);
width: getSum(50, 25%);
/* ergibt beide Male */
width: 75%;
width: getSum(2em, 1.5);
width: getSum(2, 1.5em);
/* ergibt beide Male */
width: 3.5em;
4. Division, Plutimikation
Wer jetzt denkt, dass hier die gleichen Regeln gelten wie bei der Addition, Ätschibätsch! Pustekuchen. Zunächst mal das Grundsätzliche. Bei den Parametern darf man die Maßeinheit nur bei einem Wert angeben, sonst haut's euch eine Fehlermeldung um die Ohren. Wer von denen das Vergnügen hat, ist dagegen lattens.
Multiplizieren
@function getSum($var1, $var2, $var3) {
$sum: $var1 * $var2 * $var3;
@return $sum;
}
.bla {
width: getSum(2, 6px, 4);
}
/* wird zu */
width: 48px;
.bla {
width: getSum(2, 6, 4%);
}
/* wird zu */
width: 48%;
Dividieren
Hier darf keine Maßeinheit angeben werden! Stattdessen kann man ein px oder em in der Funktion anhängen. Also so.
@function getPrecent($var1, $var2) {
@return $var1 / $var2 + px;
}
.bla {
width: getPrecent(12, 6);
}
/* wird zu */
width: 2px;
Wer das mit einem % versucht, kriegt vom Präprozessor eins auf die Nase. Stattdessen gibt es eine andere Möglichkeit.
@function getPrecent($var1, $var2) {
@return $var1 / $var2 * 1%;
}
Oder man macht es sofort richtig und rechnet direkt in Prozent.
@function getPrecent($var1, $var2) {
@return round($var1 / $var2) * 100%;
}
5. Ganz wichtig
SCSS nimmt nur die nackten Zahlen, mehr nicht. Es wird also nicht geprüft, ob die 100 Prozent von Element X 500 Pixel hoch ist und von dort ausgehend dann für ein untergeordnetes Element eine eigene Höhe berechnet wird. Darum sind die Funktionen meiner Meinung nach nur recht eingeschränkt nutzbar.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt