ไมกซินใน LESS

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

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

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

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

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

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

styles.lessp {
  .mix;
  color: red;
}

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

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

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

p {
  .mix;
  width: 300px;
}