มีเดียควอรีใน LESS

มาสร้างฟังก์ชันที่จะเพิ่ม มีเดียควอรี ให้กับองค์ประกอบกัน เพื่อเป็นตัวอย่าง ให้มันเป็นคิวรีที่ควบคุมสไตล์สำหรับ อุปกรณ์มือถือ มาตั้งชื่อฟังก์ชันของเรา ให้เหมาะสม:

.mobile(@code) {

}

ฟังก์ชันของเราจะรับพารามิเตอร์เป็นบล็อก โค้ด มาดูบล็อกนี้ภายในมีเดียควอรีกัน:

.mobile(@code) {
	@media (max-width: 600px) {
		@code();
	}
}

ทีนี้มาใช้ฟังก์ชันของเรา:

div {
	.mobile({
		width: 300px;
	});
}

ผลลัพธ์หลังการคอมไพล์ div ของเราจะอยู่ ภายในมีเดียควอรี และได้รับสไตล์ ที่สอดคล้อง:

@media (max-width: 600px) {
	div {
		width: 300px;
	}
}

สร้างฟังก์ชัน tablet ที่กำหนด สไตล์สำหรับแท็บเล็ต

สร้างฟังก์ชัน gadget ที่กำหนด สไตล์สำหรับมือถือและแท็บเล็ต

สร้างฟังก์ชัน notebook ที่กำหนด สไตล์สำหรับโน๊ตบุ๊ค

สร้างฟังก์ชัน desktop ที่กำหนด สไตล์สำหรับเดสก์ท็อป