น้อย - ยามผสม

คำอธิบาย

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

ตารางต่อไปนี้อธิบายประเภทของการ์ดป้องกันมิกซ์อินประเภทต่างๆพร้อมคำอธิบาย

ซีเนียร์	ประเภทและคำอธิบาย
1	Guard Comparison Operators คุณสามารถใช้ตัวดำเนินการเปรียบเทียบ (=) เพื่อเปรียบเทียบตัวเลขสตริงตัวระบุ ฯลฯ
2	Guard Logical Operators คุณสามารถใช้คีย์เวิร์ดandเพื่อหลีกเลี่ยงตัวดำเนินการเชิงตรรกะกับยาม
3	พิมพ์ฟังก์ชันการตรวจสอบ ประกอบด้วยฟังก์ชันในตัวเพื่อกำหนดประเภทค่าสำหรับการจับคู่มิกซ์อิน
4	ส่วนผสมตามเงื่อนไข LESS ใช้ฟังก์ชันเริ่มต้นเพื่อจับคู่มิกซ์อินกับการจับคู่การผสมอื่น ๆ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ mixin guards ในไฟล์ LESS -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

ตอนนี้สร้างไฟล์style.less

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

คุณสามารถรวบรวมstyle.lessเป็นstyle.css ได้โดยใช้คำสั่งต่อไปนี้ -

lessc style.less style.css

ดำเนินการคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้ -

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

เอาต์พุต

ทำตามขั้นตอนเหล่านี้เพื่อดูว่าโค้ดด้านบนทำงานอย่างไร -

บันทึกรหัส html ด้านบนในไฟล์ mixin-guard.html ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น