Aritmetikte çok yardımcı olsa da, Sass matematiksel yardımcı işlevlerde biraz yetersiz kalıyor. Resmi depoda yaklaşık 3 yıldır matematikle ilgili daha fazla işlev istemek için açık bir sorun var.
Compass veya SassyMath gibi bazı üçüncü taraf satıcılar matematik özellikleri için gelişmiş destek sağlar, ancak bunlar kaçınılması (gereken?) Dış bağımlılıklardır.
Bu konudaki en popüler taleplerden biri, bir kuvvet fonksiyonu veya hatta bir üslü operatördür. Ne yazık ki, Sass'ta bunun için hala bir destek yok ve hala aktif tartışma devam ederken, çok yakında olması muhtemel değil.
Bu arada, bir sayıyı belirli bir güce yükseltebilmek CSS'de çok faydalı oluyor. İşte işe yarayacağı birkaç örnek:
- bir rengin parlaklığını belirlemek için;
- bir sayıyı belirli sayıda basamağa sabitlemek için;
- bazı (ters) trigonometri yapmak için…
Sass uygulaması
Neyse ki bizim için, Sass'tan başka hiçbir şey olmadan bir güç işlevi oluşturmak mümkün (ve oldukça basit). Tek ihtiyacımız olan bir döngü ve bazı temel matematiksel operatörler ( *ve gibi /).
Pozitif tam sayı üsleri
İşlevimiz (adlandırılmış pow) en küçük haliyle şöyle görünür:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )İşte bir örnek:
.foo ( width: pow(20, 2) * 1px; // 400px )Pozitif veya negatif tam sayı üsleri
Ancak, yalnızca pozitif bir "$ güç" argümanıyla çalışır. Negatif üslere izin vermek o kadar zor olmazdı, sadece küçük bir ekstra koşula ihtiyacımız var:
@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; )İşte bir örnek:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Pozitif veya negatif üsler
Şimdi, tamsayı olmayan üsler istersek? Gibi 4.2örneğin? Gerçek şu ki, bu gerçekten kolay değil. Hala yapılabilir, ancak sadece bir döngü ve birkaç işlemden fazlasını gerektirir.
Bu, Bourbon deposunda modular-scale(… )işlevi çerçeveden tamamlamak için yapılmıştır (ancak reddedilmiştir). İşte kod:
@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; )Diğer hususlar
Bu çok yoğundu. Tamsayı olmayan üsler için desteğe ihtiyacınız varsa (gibi 4.2), projenize tüm bu kodu dahil etmek yerine, bunu sağlayan harici bir bağımlılık (sass-math-pow gibi ) kullanmanızı tavsiye ederim. Kendi başına kötü bir şey olduğu için değil, ancak projenizin bu kadar büyük bir sayıda yazılmamış çoklu doldurma kodunu barındırmak gerçekten rolü değildir (bu yüzden paket yöneticilerimiz var).
Ayrıca tüm bu işlemlerin Sass gibi ince bir katman için oldukça yoğun olduğunu unutmayın. Bu noktada ve tasarımınız gelişmiş matematiksel işlevlere dayanıyorsa, bu yardımcıların uygulamasını üst katmandan (Node.js, Ruby, vb.) Sass'a bir eklenti sistemi (Eyeglass, Ruby vb.) Üzerinden geçirmek muhtemelen daha iyidir. gem vb.).
Ancak temel pow(… )kullanım için basit sürümleri yeterince öneremem!