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

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

styles.less.mobile(@code) {

}

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

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

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

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

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

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