Walaupun sangat membantu dengan aritmetik, Sass agak kekurangan fungsi pembantu matematik. Terdapat isu terbuka di repositori rasmi untuk meminta lebih banyak fungsi yang berkaitan dengan matematik selama hampir 3 tahun.
Beberapa vendor pihak ketiga seperti Compass atau SassyMath memberikan sokongan lanjutan untuk ciri matematik, tetapi mereka adalah pergantungan luaran yang boleh (harus?) Dielakkan.
Salah satu permintaan yang paling popular mengenai perkara ini adalah fungsi kuasa atau pengendali eksponen. Malangnya, masih belum ada sokongan untuk ini di Sass dan sementara masih dalam perbincangan aktif, ia tidak mungkin berlaku dalam masa terdekat.
Sementara itu, dapat meningkatkan jumlah ke kekuatan tertentu sangat berguna dalam CSS. Berikut adalah beberapa contoh yang sangat berguna:
- untuk menentukan kecerahan warna;
- untuk membetulkan nombor hingga sejumlah digit;
- untuk melakukan beberapa trigonometri (songsang)…
Pelaksanaan Sass
Nasib baik bagi kami, adalah mungkin (dan cukup sederhana) untuk membuat fungsi kuasa tanpa Sass. Yang kita perlukan hanyalah gelung dan beberapa pengendali matematik asas (seperti *dan /).
Eksponen integer positif
Fungsi kami (dinamakan pow) dalam bentuk terkecil akan kelihatan seperti ini:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Berikut adalah contoh:
.foo ( width: pow(20, 2) * 1px; // 400px )Eksponen integer positif atau negatif
Namun ia hanya berfungsi dengan argumen `$ power` positif. Membolehkan eksponen negatif tidak begitu sukar, kita hanya memerlukan sedikit syarat tambahan:
@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 adalah contoh:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Eksponen positif atau negatif
Sekarang, bagaimana jika kita mahukan eksponen bukan bilangan bulat? Seperti 4.2misalnya? Yang benar adalah bahawa ia sebenarnya tidak mudah. Ia masih boleh dilakukan, tetapi memerlukan lebih dari sekadar gelung dan beberapa operasi.
Ini telah dilakukan di repositori Bourbon untuk menyelesaikan modular-scale(… )fungsi dari kerangka kerja (walaupun telah ditolak). Inilah kodnya:
@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
Itu sangat kuat. Sekiranya anda memerlukan sokongan untuk eksponen bukan bilangan bulat (seperti 4.2), saya cadangkan anda menggunakan pergantungan luaran yang menyediakannya (seperti sass-math-pow) dan bukannya memasukkan semua kod ini dalam projek anda. Bukannya itu adalah perkara yang tidak betul, tetapi sebenarnya bukan peranan projek anda untuk menjadi tuan rumah sekumpulan kod poli pengisian yang tidak banyak (sebab itulah kami mempunyai pengurus pakej).
Perhatikan juga bahawa semua operasi ini cukup intensif untuk lapisan tipis seperti Sass. Pada ketika ini, dan jika reka bentuk anda bergantung pada fungsi matematik lanjutan, mungkin lebih baik melancarkan pelaksanaan pembantu ini dari lapisan atas (Node.js, Ruby, dll.) Ke Sass melalui sistem pemalam (Eyeglass, Ruby permata, dll.).
Tetapi untuk pow(… )penggunaan asas , saya tidak dapat mengesyorkan versi mudah cukup!