Mixin trong LESS

Trong bài học này, chúng ta sẽ làm quen với mixin (sự pha trộn), cho phép đưa một lớp này vào bên trong một lớp khác. Hãy cùng tìm hiểu xem nó là gì và cách làm việc với nó.

Về bản chất, mixin là việc sử dụng các lớp này bên trong các lớp khác, khi một lớp đóng vai trò là một mẫu có sẵn - một đoạn mã xác định, mà chúng ta có thể sử dụng ở nhiều nơi.

Điều này tiện lợi ở chỗ nào? Với CSS thuần túy, chúng ta sẽ phải gõ lại đoạn mã mẫu ở mọi nơi cần dùng đến nó, còn trong LESS, chúng ta có thể viết nó một lần ở một chỗ và sau đó kết nối nó vào những vị trí cần thiết trong mã.

Hãy xem xét một ví dụ. Giả sử chúng ta có lớp sau:

.mix {
	width: 100px;
	height: 100px;
}

Hãy sử dụng lớp này như một mixin:

p {
	.mix;
	color: red;
}

Kết quả là sau khi biên dịch, các kiểu của lớp chúng ta sẽ được chèn vào phần tử paragraph:

p {
	width: 100px;
	height: 100px;
	color: red;
}

Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ là gì:

.mix {
	color: white;
	background: black;
}

p {
	.mix;
	width: 300px;
}