น้อย - ขยาย

Extend เป็นคลาสหลอกน้อยซึ่งขยายสไตล์ตัวเลือกอื่น ๆ ในตัวเลือกเดียวโดยใช้ :extend ตัวเลือก

ตัวอย่าง

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

expand_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         <p>Hello!!!!!</p>
      </div>
   </body>
</html>

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

style.less

h2 {
   &:extend(.style);
   font-style: italic;
}

.style {
   background: green;
}

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

lessc style.less style.css

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

style.css

h2 {
   font-style: italic;
}

.style,
h2 {
   background: blue;
}

เอาต์พุต

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

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

ขยายไวยากรณ์

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

ตัวอย่าง

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

expand_syntax.htm

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

   <body>
      <div class = "style">
         <h2>Welcome to TutorialsPoint</h2>
         
         <div class = "container">
            <p>Hello!!!!!</p>
         </div>
      
      </div>
   </body>
</html>

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

style.less

.style:extend(.container, .img) {
   background: #BF70A5;
}

.container {
   font-style: italic;
}

.img {
   font-size: 30px;
}

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

lessc style.less style.css

style.css

.style {
   background: #BF70A5;
}

.container,
.style {
   font-style: italic;
}

.img,
.style {
   font-size: 30px;
}

เอาต์พุต

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

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

ตารางต่อไปนี้แสดงประเภทของไวยากรณ์ส่วนขยายทั้งหมดที่คุณสามารถใช้ได้ใน LESS -

ซีเนียร์	ประเภทและคำอธิบาย
1	ขยายสิ่งที่แนบมากับตัวเลือก Extend เชื่อมต่อกับตัวเลือกซึ่งมีลักษณะคล้ายกับคลาสหลอกโดยมีตัวเลือกเป็นพารามิเตอร์
2	ขยายชุดกฎภายใน &:extend(selector) ไวยากรณ์สามารถใส่ไว้ในเนื้อความของชุดกฎ
3	การขยายตัวเลือกที่ซ้อนกัน ตัวเลือกที่ซ้อนกันจะจับคู่โดยใช้ตัวเลือกขยาย
4	การจับคู่ที่แน่นอนกับ Extend โดยค่าเริ่มต้น, extend ค้นหาการจับคู่ที่ตรงกันระหว่างตัวเลือก
5	นิพจน์ที่ n รูปแบบของนิพจน์ที่ n มีความสำคัญในการขยายมิฉะนั้นถือว่าตัวเลือกต่างกัน
6	ขยาย "ทั้งหมด" เมื่อคำหลักทั้งหมดถูกระบุในที่สุดในextend อาร์กิวเมนต์จากนั้น LESS จะจับคู่ตัวเลือกนั้นเป็นส่วนหนึ่งของตัวเลือกอื่น
7	Selector Interpolation with Extend extend สามารถเชื่อมต่อกับตัวเลือก interpolated
8	กำหนดขอบเขต / ขยายด้านใน @media ขยายให้ตรงกับตัวเลือกเท่านั้นที่มีอยู่ในการประกาศสื่อเดียวกัน
9	การตรวจจับการทำซ้ำ ไม่สามารถตรวจพบการซ้ำกันของตัวเลือก

ต่อไปนี้เป็นประเภทของ Use Cases for Extend

ซีเนียร์	ประเภทและคำอธิบาย
1	กรณีการใช้งานแบบคลาสสิก กรณีการใช้งานแบบคลาสสิกใช้เพื่อหลีกเลี่ยงการเพิ่มคลาสพื้นฐานใน LESS
2	การลดขนาด CSS Extend ใช้เพื่อย้ายตัวเลือกไปให้ไกลที่สุดเท่าที่คุณสมบัติที่คุณต้องการใช้ สิ่งนี้ช่วยในการลดโค้ดที่สร้างโดย css
3	การผสมผสานสไตล์ / มิกซ์อินขั้นสูงเพิ่มเติม การใช้การขยายเราสามารถรวมสไตล์เดียวกันของตัวเลือกเฉพาะเข้ากับตัวเลือกอื่น ๆ