ไมกซินใน LESS

ในบทเรียนนี้ เราจะมาทำความรู้จักกับ ไมกซิน (การผสม) ซึ่งอนุญาตให้รวมคลาสหนึ่งเข้าไปยังอีกคลาสหนึ่ง เรามาดูกันว่ามันคืออะไรและวิธีการใช้งาน

โดยพื้นฐานแล้ว การผสมคือการใช้คลาสหนึ่งภายในอีกคลาสหนึ่ง เมื่อคลาสหนึ่งเป็นแบบสำเร็จรูป - เป็นโค้ดส่วนหนึ่งที่กำหนดไว้ ซึ่งเราสามารถใช้ได้ในหลาย ๆ ที่

ข้อดีของมันคืออะไร? ใน CSS บริสุทธิ์ เราจะต้อง พิมพ์โค้ดแบบสำเร็จรูปทุกที่ที่ต้องการใช้มัน แต่ใน LESS เราสามารถเขียนมันไว้ที่เดียว แล้วจึงเชื่อมต่อมันไปยังตำแหน่งที่ต้องการในโค้ด

มาดูตัวอย่างกัน สมมติว่าเรามีคลาสต่อไปนี้:

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

ลองใช้คลาสนี้เป็นไมกซิน:

p {
	.mix;
	color: red;
}

ผลลัพธ์ หลังจากคอมไพล์ สไตล์ของคลาสเราจะถูกนำมาใส่ในพารากราฟ:

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

บอกหน่อยว่าผลลัพธ์การคอมไพล์ของโค้ดต่อไปนี้จะเป็นอย่างไร:

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

p {
	.mix;
	width: 300px;
}