Sebbene sia molto utile con l'aritmetica, Sass è un po 'a corto di funzioni di supporto matematico. C'è stato un problema aperto sul repository ufficiale per chiedere più funzioni relative alla matematica per quasi 3 anni.
Alcuni fornitori di terze parti come Compass o SassyMath forniscono supporto avanzato per le funzionalità matematiche, ma sono dipendenze esterne che potrebbero (dovrebbero?) Essere evitate.
Una delle richieste più popolari su questo argomento è una funzione di potenza o anche un operatore esponente. Sfortunatamente, non c'è ancora alcun supporto per questo in Sass e mentre è ancora in discussione attiva, è improbabile che accada molto presto.
Nel frattempo, essere in grado di aumentare un numero a una certa potenza sembra essere molto utile nei CSS. Ecco alcuni esempi in cui potrebbe tornare utile:
- determinare la luminanza di un colore;
- per fissare un numero a una certa quantità di cifre;
- fare un po 'di trigonometria (inversa) ...
Implementazione di Sass
Fortunatamente per noi, è possibile (e abbastanza semplice) creare una funzione di potenza con nient'altro che Sass. Tutto ciò di cui abbiamo bisogno è un ciclo e alcuni operatori matematici di base (come *e /).
Esponenti interi positivi
La nostra funzione (denominata pow) nella sua forma più piccola sarebbe simile a questa:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Ecco un esempio:
.foo ( width: pow(20, 2) * 1px; // 400px )Esponenti interi positivi o negativi
Tuttavia funziona solo con un argomento positivo "$ power". Consentire esponenti negativi non sarebbe così difficile, abbiamo solo bisogno di una piccola condizione extra:
@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; )Ecco un esempio:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Esponenti positivi o negativi
Ora, cosa succede se vogliamo esponenti non interi? Come 4.2per esempio? La verità è che non è davvero facile. È ancora fattibile, ma richiede più di un semplice ciclo e poche operazioni.
Questo è stato fatto sul repository Bourbon per completare la modular-scale(… )funzione dal framework (sebbene sia stato rifiutato). Ecco il codice:
@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; )Ulteriori considerazioni
Bene, è stato intenso. Se ti capita di aver bisogno del supporto per esponenti non interi (come 4.2), ti consiglio di usare una dipendenza esterna che lo fornisce (come sass-math-pow) invece di includere tutto questo codice nel tuo progetto. Non che sia una cosa negativa di per sé, ma non è proprio il ruolo del tuo progetto ospitare un così grande montaggio di codice polyfilling non autore (ecco perché abbiamo gestori di pacchetti).
Si noti inoltre che tutte queste operazioni sono piuttosto impegnative per uno strato sottile come Sass. A questo punto, e se il tuo progetto si basa su funzioni matematiche avanzate, è probabilmente meglio passare l'implementazione di questi helper dal livello superiore (Node.js, Ruby, ecc.) Fino a Sass attraverso un sistema di plugin (Eyeglass, Ruby gemma, ecc.).
Ma per un pow(… )utilizzo di base , non posso raccomandare abbastanza le versioni semplici!