Während Sass beim Rechnen sehr hilfreich ist, fällt er bei mathematischen Hilfsfunktionen etwas zu kurz. Es gibt seit fast 3 Jahren ein offenes Problem im offiziellen Repository, in dem nach mehr mathematischen Funktionen gefragt wird.
Einige Drittanbieter wie Compass oder SassyMath bieten erweiterte Unterstützung für mathematische Funktionen, es handelt sich jedoch um externe Abhängigkeiten, die vermieden werden könnten (sollten?).
Eine der beliebtesten Anforderungen in dieser Angelegenheit ist eine Potenzfunktion oder sogar ein Exponentenoperator. Leider gibt es in Sass immer noch keine Unterstützung dafür, und während es noch aktiv diskutiert wird, ist es unwahrscheinlich, dass es sehr bald passieren wird.
In der Zwischenzeit ist es in CSS sehr nützlich, eine Zahl auf eine bestimmte Potenz erhöhen zu können. Hier sind einige Beispiele, bei denen es nützlich wäre:
- die Leuchtdichte einer Farbe zu bestimmen;
- eine Zahl auf eine bestimmte Anzahl von Ziffern festzulegen;
- etwas (inverse) Trigonometrie machen ...
Sass-Implementierung
Zum Glück ist es möglich (und ganz einfach), eine Power-Funktion nur mit Sass zu erstellen. Wir brauchen nur eine Schleife und einige grundlegende mathematische Operatoren (wie *und /).
Positive ganzzahlige Exponenten
Unsere Funktion (benannt pow) in ihrer kleinsten Form würde folgendermaßen aussehen:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Hier ist ein Beispiel:
.foo ( width: pow(20, 2) * 1px; // 400px )Positive oder negative ganzzahlige Exponenten
Es funktioniert jedoch nur mit einem positiven "$ power" -Argument. Negative Exponenten zuzulassen wäre nicht so schwer, wir brauchen nur eine kleine zusätzliche Bedingung:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent < 0 ( @for $i from 1 through -$exponent ( $value: $value / $number; ) ) @return $value; )Hier ist ein Beispiel:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Positive oder negative Exponenten
Was ist nun, wenn wir nicht ganzzahlige Exponenten wollen? Wie 4.2zum Beispiel? Die Wahrheit ist, dass es wirklich nicht einfach ist. Es ist immer noch machbar, erfordert jedoch mehr als nur eine Schleife und einige Operationen.
Dies wurde im Bourbon-Repository durchgeführt, um die modular-scale(… )Funktion aus dem Framework heraus zu vervollständigen (obwohl dies abgelehnt wurde). Hier ist der Code:
@function pow($number, $exponent) ( @if (round($exponent) != $exponent) ( @return exp($exponent * ln($number)); ) $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @else if $exponent pow(10, $ten-exp)) ( $ten-exp: $ten-exp + 1; ) @return summation(ln-maclaurin, $value / pow(10, $ten-exp), 1, 100) + $ten-exp * $ln-ten; )Weitere Überlegungen
Das war intensiv. Wenn Sie Unterstützung für nicht ganzzahlige Exponenten (wie 4.2) benötigen , empfehle ich Ihnen, eine externe Abhängigkeit zu verwenden, die diese bereitstellt (z. B. sass-math-pow), anstatt den gesamten Code in Ihr Projekt aufzunehmen. Nicht, dass es per se eine schlechte Sache ist, aber es ist nicht wirklich die Aufgabe Ihres Projekts, eine so große Menge nicht erstellten Polyfilling-Codes zu hosten (deshalb haben wir Paketmanager).
Beachten Sie auch, dass all diese Vorgänge für eine so dünne Schicht wie Sass ziemlich intensiv sind. An diesem Punkt und wenn Ihr Design auf erweiterten mathematischen Funktionen basiert, ist es wahrscheinlich besser, die Implementierung dieser Helfer von der oberen Ebene (Node.js, Ruby usw.) über ein Plugin-System (Eyeglass, Ruby) an Sass weiterzugeben Edelstein usw.).
Aber für den grundlegenden pow(… )Gebrauch kann ich die einfachen Versionen nicht genug empfehlen!