Meskipun sangat membantu dengan aritmatika, Sass sedikit kurang dalam hal fungsi pembantu matematika. Ada masalah terbuka di repositori resmi untuk meminta lebih banyak fungsi terkait matematika selama hampir 3 tahun.
Beberapa vendor pihak ketiga seperti Compass atau SassyMath menyediakan dukungan lanjutan untuk fitur matematika, tetapi mereka adalah dependensi eksternal yang dapat (harus?) Dihindari.
Salah satu permintaan paling populer dalam hal ini adalah fungsi pangkat atau bahkan operator eksponen. Sayangnya, masih belum ada dukungan untuk ini di Sass dan sementara masih dalam diskusi aktif, hal itu tidak mungkin terjadi dalam waktu dekat.
Sementara itu, kemampuan menaikkan angka ke kekuatan tertentu sangat berguna di CSS. Berikut adalah beberapa contoh yang akan berguna:
- untuk menentukan luminansi warna;
- untuk memperbaiki angka menjadi sejumlah digit;
- melakukan beberapa trigonometri (kebalikan)…
Implementasi Sass
Untungnya bagi kami, dimungkinkan (dan cukup sederhana) untuk membuat fungsi daya hanya dengan Sass. Yang kita butuhkan hanyalah sebuah loop dan beberapa operator matematika dasar (seperti *dan /).
Eksponen bilangan bulat positif
Fungsi kita (dinamai pow) dalam bentuk terkecilnya akan terlihat seperti ini:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Berikut ini contohnya:
.foo ( width: pow(20, 2) * 1px; // 400px )Eksponen bilangan bulat positif atau negatif
Namun itu hanya bekerja dengan argumen `$ power` positif. Membiarkan eksponen negatif tidak terlalu sulit, kita hanya perlu kondisi ekstra kecil:
@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; )Berikut ini contohnya:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Eksponen positif atau negatif
Sekarang, bagaimana jika kita menginginkan eksponen non-integer? Seperti 4.2misalnya? Sebenarnya itu tidak mudah. Ini masih bisa dilakukan, tetapi membutuhkan lebih dari sekedar loop dan beberapa operasi.
Ini telah dilakukan pada repositori Bourbon untuk menyelesaikan modular-scale(… )fungsi dari kerangka kerja (meskipun telah ditolak). Ini kodenya:
@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; )Pertimbangan lebih lanjut
Nah, itu intens. Jika Anda kebetulan membutuhkan dukungan untuk eksponen non-integer (seperti 4.2), saya sarankan Anda menggunakan dependensi eksternal yang menyediakannya (seperti sass-math-pow) daripada menyertakan semua kode ini dalam proyek Anda. Bukan berarti itu adalah hal yang buruk, tetapi sebenarnya bukan peran proyek Anda untuk meng-host begitu banyak kode polyfilling yang tidak diotorisasi (itulah mengapa kami memiliki manajer paket).
Perhatikan juga bahwa semua operasi ini cukup intensif untuk lapisan tipis seperti Sass. Pada titik ini, dan jika desain Anda bergantung pada fungsi matematika tingkat lanjut, mungkin lebih baik meneruskan implementasi pembantu ini dari lapisan atas (Node.js, Ruby, dll.) Ke Sass melalui sistem plugin (Eyeglass, Ruby permata, dll.).
Tetapi untuk pow(… )penggunaan dasar , saya tidak bisa merekomendasikan versi yang cukup sederhana!