Hàm trong LESS

Trong bài học này, chúng ta sẽ xem xét cách sử dụng các hàm. Các hàm, có phần giống với mixin, nhưng đồng thời cho phép thêm các tham số, có thể thay đổi giá trị của chúng.

Các tham số này được truyền trong dấu ngoặc tròn của hàm. Hãy xem ví dụ.

Hãy tạo một hàm fs, sẽ đặt kích thước phông chữ. Hãy để kích thước được truyền qua một tham số. Tham số sẽ là một biến, tên mà chúng ta nghĩ ra khi khai báo hàm:

.fs(@size) {
	// mã hàm sẽ ở đây
}

Hãy chỉ định bên trong hàm, nơi giá trị của tham số của chúng ta sẽ được chèn vào:

.fs(@size) {
	font-size: @size;
}

Hãy gọi hàm của chúng ta, truyền cho nó kích thước mong muốn của phần tử làm tham số:

p {
	.fs(20px);
}

Kết quả là sau khi biên dịch, kích thước phông chữ của đoạn văn sẽ bằng giá trị được chỉ định:

p {
	font-size: 20px;
}

Hãy tạo hàm w(), hàm này sẽ đặt chiều rộng cho phần tử.

Hãy tạo hàm h(), hàm này sẽ đặt chiều cao cho phần tử.