Bài 16: Các hàm xử lý Number trong SASS

Tiếp tục tìm hiểu các hàm có sẵn trong SASS và trong bài này chúng ta sẽ tìm hiểu các hàm dùng để xử lý Number.

1. Các hàm xử Number trong SASS

Chúng ta có tổng cộng 8 hàm xử lý Number hay sử dụng như sau:

Tên hàm Mô tả
percentage($number) Biến đổi số $number thành tỉ lệ phần trăm (%)
round($number) Làm tròn số $number
ceil($number) Làm tròn số $number ở cận trên
floor($number) Làm tròn số $number ở cận dưới
abs($number) Tính giá trị tuyệt đối cho $number
min($numbers…) Tìm số $number nhỏ nhất trong dãy truyền vào
max($numbers…) Tìm số $number lớn nhất trong dãy truyền vào
random([$limit]) Random ngẫu nhiên một con số không quá $limit.

2. Ví dụ các hàm xử lý Number trong SASS

Một số ví dụ liên quan đến các hàm xử lý Number trong SASS.

percentage($number)

Chuyển đổi số $number sang tỉ lệ phần trăm.

Ví dụ:

percentage(0.2) => 20%
percentage(100px / 50px) => 200%

round($number)

Làm tròn số $number ở cận gần nhất.

Ví dụ:

round(10.4px) => 10px
round(10.6px) => 11px

ceil($number)

Làm tròn số $number ở cận trên.

Ví dụ:

ceil(10.4px) => 11px
ceil(10.6px) => 11px

floor($number)

Làm tròn số $number ở cận dưới, 

Ví dụ:

floor(10.4px) => 10px
floor(10.6px) => 10px

abs($number)

Lấy giá trị tuyệt đối của $number.

Ví dụ:

abs(10px) => 10px
abs(-10px) => 10px

min($numbers…)

Lấy số nhỏ nhất trong dãy $number truyền vào.

Ví dụ:

min(1px, 4px) => 1px
min(5em, 3em, 4em) => 3em

max($numbers…)

Lấy số lớn nhất trong dãy $number truyền vào.

Vi dụ:

max(1px, 4px) => 4px
max(5em, 3em, 4em) => 5em<br />

random([$limit])

Lấy số ngẫu nhiên không quá số  $limit.

random(9)
random(1)

3. Lời kết

Trên là những hàm xử lý Number, bài tiếp theo chúng ta sẽ tìm hiểu kiểu dữ liệu map và các hàm liên quan.

Nguồn: freetuts.net