น้อย - ส่งผ่านชุดกฎไปยัง Mixins

คำอธิบาย

ชุดกฎที่แยกออกมีชุดกฎเช่นคุณสมบัติชุดกฎที่ซ้อนกันการประกาศตัวแปรมิกซ์อิน ฯลฯ ซึ่งจะถูกเก็บไว้ในตัวแปรและรวมไว้ในโครงสร้างอื่น คุณสมบัติทั้งหมดของชุดกฎจะถูกคัดลอกไปยังโครงสร้างนั้น

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีการส่งชุดกฎไปยังมิกซ์อินในไฟล์ LESS -

ผ่าน _ruleset.htm

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

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

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

style.less

@detached-ruleset: {
   .mixin() {
      font-family: "Comic Sans MS";
      background-color: #AA86EE;
   }
};

.cont {
   @detached-ruleset();
   .mixin();
}

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

lessc style.less style.css

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

style.css

.cont {
   font-family: "Comic Sans MS";
   background-color: #AA86EE;
}

เอาต์พุต

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

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

การกำหนดขอบเขต

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

ตารางต่อไปนี้แสดงประเภทของขอบเขตทั้งหมด -

ซีเนียร์	ประเภทและคำอธิบาย
1	ความหมายและการมองเห็นขอบเขตผู้โทร ตัวแปรและมิกซ์อินถูกกำหนดไว้ภายในชุดกฎแยก
2	การอ้างอิงจะไม่แก้ไขขอบเขตชุดกฎที่แยกออกมา เพียงแค่ให้การอ้างอิงชุดกฎก็ไม่สามารถเข้าถึงขอบเขตใหม่ ๆ ได้
3	การปลดล็อกจะแก้ไขขอบเขตชุดกฎที่แยกออกมา ชุดกฎแยกสามารถเข้าถึงขอบเขตได้โดยการนำเข้า