Mặc dù rất hữu ích với số học, Sass lại hơi hụt hẫng với các hàm trợ giúp toán học. Đã có một vấn đề mở trên kho lưu trữ chính thức để yêu cầu thêm các chức năng liên quan đến toán học trong gần 3 năm.
Một số nhà cung cấp bên thứ ba như Compass hoặc SassyMath cung cấp hỗ trợ nâng cao cho các tính năng toán học, nhưng chúng là các phụ thuộc bên ngoài có thể (nên?) Tránh.
Một trong những yêu cầu phổ biến nhất về vấn đề này là hàm lũy thừa hoặc thậm chí là toán tử số mũ. Thật không may, vẫn chưa có hỗ trợ nào cho điều này trong Sass và trong khi nó vẫn đang được thảo luận tích cực, nó khó có thể xảy ra sớm.
Trong khi đó, có thể nâng một số lên một sức mạnh nhất định sẽ rất hữu ích trong CSS. Dưới đây là một số ví dụ mà nó sẽ hữu ích:
- để xác định độ chói của màu;
- để sửa một số thành một lượng chữ số nhất định;
- để thực hiện một số lượng giác (nghịch đảo)…
Triển khai Sass
May mắn thay cho chúng ta, có thể (và khá đơn giản) để tạo một hàm sức mạnh không gì khác ngoài Sass. Tất cả những gì chúng ta cần là một vòng lặp và một số toán tử toán học cơ bản (chẳng hạn như *và /).
Số mũ nguyên dương
Hàm của chúng ta (được đặt tên pow) ở dạng nhỏ nhất của nó sẽ trông như thế này:
@function pow($number, $exponent) ( $value: 1; @if $exponent > 0 ( @for $i from 1 through $exponent ( $value: $value * $number; ) ) @return $value; )Đây là một ví dụ:
.foo ( width: pow(20, 2) * 1px; // 400px )Số mũ số nguyên dương hoặc âm
Tuy nhiên, nó chỉ hoạt động với đối số `$ power` dương. Việc cho phép số mũ âm sẽ không quá khó, chúng ta chỉ cần thêm một điều kiện nhỏ:
@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; )Đây là một ví dụ:
.foo ( width: pow(10, -2) * 1px; // 0.0001px )Số mũ dương hoặc âm
Bây giờ, điều gì sẽ xảy ra nếu chúng ta muốn số mũ không phải là số nguyên? Chẳng hạn như 4.2chẳng hạn? Sự thật là nó thực sự không dễ dàng. Nó vẫn có thể làm được, nhưng nó đòi hỏi nhiều hơn chỉ là một vòng lặp và một vài thao tác.
Điều này đã được thực hiện trên kho lưu trữ Bourbon để hoàn thành modular-scale(… )chức năng từ khung công tác (mặc dù đã bị từ chối). Đây là mã:
@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; )Cân nhắc thêm
Chà, điều đó thật dữ dội. Nếu bạn tình cờ cần hỗ trợ cho số mũ không phải số nguyên (như 4.2), tôi khuyên bạn nên sử dụng phần phụ thuộc bên ngoài cung cấp nó (chẳng hạn như sass-math-pow) thay vì đưa tất cả mã này vào dự án của bạn. Đó không phải là một điều xấu, nhưng dự án của bạn không thực sự có vai trò lưu trữ một lượng lớn mã polyfilling không có tác giả như vậy (đó là lý do tại sao chúng tôi có các trình quản lý gói).
Cũng lưu ý rằng tất cả các thao tác này khá chuyên sâu đối với một lớp mỏng như Sass. Tại thời điểm này, và nếu thiết kế của bạn dựa trên các hàm toán học nâng cao, có lẽ tốt hơn nên chuyển việc triển khai các trình trợ giúp này từ lớp trên (Node.js, Ruby, v.v.) xuống Sass thông qua một hệ thống plugin (Eyeglass, Ruby đá quý, v.v.).
Nhưng để pow(… )sử dụng cơ bản , tôi không thể giới thiệu các phiên bản đơn giản đủ!