น้อย - CSS Guards

คำอธิบาย

Guards ใช้เพื่อจับคู่ค่าธรรมดาหรืออาร์กิวเมนต์จำนวนหนึ่งในนิพจน์ ใช้กับตัวเลือก CSS เป็นไวยากรณ์สำหรับการประกาศมิกซ์อินและเรียกใช้ทันที เพื่อนำไฟล์ifประเภทคำสั่ง; เข้าร่วมกับคุณลักษณะนี้&ซึ่งช่วยให้คุณจัดกลุ่มผู้คุมได้หลายคน

ตัวอย่าง

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

css_guard.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

จากนั้นสร้างไฟล์style.less

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

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

lessc style.less style.css

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

style.css

.style {
   background-color: blue;
   color: white;
}

เอาต์พุต

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

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