CSS - Math Functions: A Beginner's Guide

Xin chào các pháp sư CSS tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các hàm toán học trong CSS. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau bước từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ ngạc nhiên về khả năng bạn có thể làm được với chỉ một vài mẹo toán học trong CSS!

Basic Arithmetic Functions

Hãy bắt đầu từ những điều cơ bản. CSS cung cấp cho chúng ta một số hàm toán học đơn giản giúp cuộc sống của chúng ta dễ dàng hơn khi thiết kế các trang web. Các hàm này cho phép chúng ta thực hiện các phép toán trực tiếp trong mã CSS của mình.

The calc() Function

Hàm calc() là瑞士军刀 của các hàm toán học trong CSS. Nó cho phép bạn thực hiện các phép toán cơ bản trực tiếp trong CSS. Hãy cùng xem một ví dụ:

.box {
width: calc(100% - 20px);
}

Trong ví dụ này, chúng ta đang đặt chiều rộng của một phần tử có lớp "box" là 100% chiều rộng của phần tử cha, trừ đi 20 pixel. Điều này rất hữu ích khi bạn muốn tạo các bố cục linh hoạt adapt với các kích thước màn hình khác nhau.

Hãy phân tích nó:

• 100% đại diện cho toàn bộ chiều rộng của phần tử cha.
• -20px trừ đi 20 pixel từ chiều rộng đó.
• Hàm calc() thực hiện phép toán này cho chúng ta.

Bạn có thể sử dụng tất cả bốn phép toán cơ bản trong calc(): cộng (+), trừ (-), nhân (*), và chia (/). Dưới đây là một ví dụ khác:

.column {
width: calc(33.33% - 10px);
margin-right: calc(10px * 2);
}

Trong trường hợp này, chúng ta đang tạo một bố cục ba cột. Mỗi cột chiếm một phần ba chiều rộng (33.33%) trừ đi 10 pixel cho khoảng cách, và chúng ta thêm một margin phải gấp đôi kích thước của khoảng cách.

Comparison Functions

Bây giờ chúng ta đã nắm vững các điều cơ bản, hãy chuyển sang một số hàm so sánh. Những hàm này rất tốt cho việc tạo các thiết kế linh hoạt adapt với các điều kiện khác nhau.

The min() Function

Hàm min() trả về giá trị nhỏ nhất trong một danh sách các giá trị. Nó hoàn hảo để đặt giới hạn tối đa trên kích thước của phần tử. Ví dụ:

.responsive-text {
font-size: min(5vw, 30px);
}

Điều này đặt kích thước chữ để là 5% của chiều rộng viewport, nhưng không lớn hơn 30 pixel. Đây là một cách tuyệt vời để làm cho văn bản linh hoạt mà không làm cho nó quá lớn trên các màn hình lớn.

The max() Function

Như bạn có thể đoán, max() làm ngược lại với min(). Nó trả về giá trị lớn nhất trong một danh sách các giá trị. Dưới đây là cách bạn có thể sử dụng nó:

.responsive-image {
width: max(300px, 50%);
}

Điều này đảm bảo rằng một hình ảnh luôn rộng ít nhất 300 pixel, ngay cả khi 50% của containner của nó nhỏ hơn.

The clamp() Function

Hàm clamp() giống như sự kết hợp của min() và max(). Nó nhận ba giá trị: một giá trị tối thiểu, một giá trị ưa thích, và một giá trị tối đa. Dưới đây là một ví dụ:

.responsive-element {
width: clamp(200px, 50%, 500px);
}

Điều này đặt chiều rộng để là 50% của containner, nhưng đảm bảo nó không nhỏ hơn 200px hoặc lớn hơn 500px.

Advanced CSS Math Functions

Bây giờ chúng ta đã bao gồm các điều cơ bản, hãy cùng lặn sâu vào một số hàm cao cấp hơn có thể thực sự nâng cao kỹ năng CSS của bạn lên một cấp độ mới.

The abs() Function

Hàm abs() trả về giá trị tuyệt đối của một số. Điều này có thể hữu ích trong các hiệu ứng动画 hoặc khi bạn muốn đảm bảo một giá trị luôn dương. Dưới đây là một ví dụ:

.box {
transform: translateX(abs(var(--x)));
}

Điều này sẽ di chuyển hộp theo phương horizontial dựa trên giá trị của thuộc tính tùy chỉnh --x, luôn theo hướng dương bất kể --x là dương hay âm.

The round() Function

Hàm round() làm tròn một số đến số nguyên gần nhất. Điều này có thể hữu ích cho việc snap các giá trị vào lưới. Ví dụ:

.grid-item {
width: calc(round(100% / 3));
}

Điều này sẽ tạo một bố cục ba cột nơi mỗi cột có chiều rộng làm tròn đến số nguyên gần nhất.

Stepped Value Functions

Các hàm giá trị bước cho phép bạn tạo ra các giá trị thay đổi theo bước离散, thay vì mịn. Những hàm này có thể rất thú vị cho việc tạo ra các hiệu ứng thị giác.

The mod() Function

Hàm mod() trả về phần dư sau phép chia. Điều này có thể được sử dụng để tạo ra các mẫu lặp lại. Dưới đây là một ví dụ:

.striped-background {
background-color: hsl(0, 0%, mod(var(--i) * 10, 100)%);
}

Điều này sẽ tạo ra một nền kẻ条纹 nơi độ sáng của mỗi条纹 được xác định bởi chỉ số (--i), lặp lại mỗi 10条纹.

Trigonometric Functions

Cuối cùng, hãy cùng tìm hiểu một số hàm lượng giác. Những hàm này có thể rất mạnh mẽ cho việc tạo ra các hiệu ứng động và bố cục phức tạp.

The sin() and cos() Functions

Các hàm sin() và cos() trả về sin và cos của một góc, tương ứng. Những hàm này thường được sử dụng trong các hiệu ứng động. Dưới đây là một ví dụ đơn giản:

@keyframes orbit {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}

.orbiting-element {
animation: orbit 5s linear infinite;
}

Điều này tạo ra một hiệu ứng quỹ đạo nơi một phần tử di chuyển theo hình tròn xung quanh một điểm trung tâm.

Function Reference Table

Dưới đây là bảng tham khảo nhanh của tất cả các hàm CSS toán học chúng ta đã bao gồm:

Hàm	Mô tả	Ví dụ
calc()	Thực hiện phép toán cơ bản	calc(100% - 20px)
min()	Trả về giá trị nhỏ nhất	min(5vw, 30px)
max()	Trả về giá trị lớn nhất	max(300px, 50%)
clamp()	Giới hạn giá trị giữa min và max	clamp(200px, 50%, 500px)
abs()	Trả về giá trị tuyệt đối	abs(var(--x))
round()	Làm tròn đến số nguyên gần nhất	round(100% / 3)
mod()	Trả về phần dư sau phép chia	mod(var(--i) * 10, 100)
sin()	Trả về sin của một góc	sin(45deg)
cos()	Trả về cos của một góc	cos(45deg)

Và thế là xong! Chúng ta đã bao gồm rất nhiều nội dung, từ phép toán cơ bản đến các hàm lượng giác cao cấp. Nhớ rằng chìa khóa để thành thạo những hàm này là thực hành. Hãy thử tích hợp chúng vào CSS của bạn, thử nghiệm với các kết hợp khác nhau, và sớm bạn sẽ tạo ra các thiết kế linh hoạt và stunning một cách dễ dàng. Chúc bạn may mắn với việc code!

Credits: Image by storyset