น้อย - ขยาย

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.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 การผสมผสานสไตล์ / มิกซ์อินขั้นสูงเพิ่มเติม

การใช้การขยายเราสามารถรวมสไตล์เดียวกันของตัวเลือกเฉพาะเข้ากับตัวเลือกอื่น ๆ