LESS มีคุณสมบัติ "ขยาย" หรือไม่?


96

SASS มีคุณสมบัติที่เรียกว่า@extendซึ่งทำให้ตัวเลือกสามารถสืบทอดคุณสมบัติของตัวเลือกอื่นได้ แต่ไม่ต้องคัดลอกคุณสมบัติ (เช่นมิกซ์อิน)

LESS มีคุณสมบัตินี้ด้วยหรือไม่?


เพื่อความชัดเจนการอ้างอิงคำถามอื่น ๆ ไม่ได้ถามในสิ่งเดียวกัน คำถามนี้ง่ายมาก: "LESS มีคุณสมบัติขยายหรือไม่" คำถามอื่น ๆ คือการถามสิ่งที่ต้องใช้ความคิดมากกว่านี้ในการตัดสินใจเกี่ยวกับสไตล์
jonschlinkert

... เพื่อเพิ่มความคิดเห็นสุดท้ายของฉันคำถามอื่น ๆ รวมถึงแท็ก "รูปแบบการเข้ารหัส" ซึ่งสนับสนุนประเด็นของฉันมากขึ้น
jonschlinkert

คำตอบ:


158

ใช่ Less.js แนะนำextendในv1.4.0

:extend()

แทนที่จะใช้@extendไวยากรณ์at-rule ( ) ที่ใช้โดย SASS และ Stylus LESS ได้ใช้ไวยากรณ์คลาสหลอกซึ่งทำให้การใช้งาน LESS มีความยืดหยุ่นในการนำไปใช้โดยตรงกับตัวเลือกเองหรือภายในคำสั่ง ดังนั้นทั้งสองอย่างนี้จะได้ผล:

.sidenav:extend(.nav) {...}

หรือ

.sidenav {
    &:extend(.nav);
    ...
}

นอกจากนี้คุณสามารถใช้allคำสั่งเพื่อขยายคลาส "ซ้อน" ได้เช่นกัน:

.sidenav:extend(.nav all){};

และคุณสามารถเพิ่มรายการคลาสที่คั่นด้วยจุลภาคที่คุณต้องการขยายได้:

.global-nav {
    &:extend(.navbar, .nav all, .navbar-fixed-top all, .navbar-inverse);
    height: 70px;
}

เมื่อขยายตัวเลือกที่ซ้อนกันคุณควรสังเกตความแตกต่าง:

ตัวเลือกที่ซ้อนกัน.selector1และselector2:

.selector1 {
  property1: a;
   .selector2 {
    property2: b;
   }
}

ตอนนี้.selector3:extend(.selector1 .selector2){};ผลลัพธ์:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector3 {
  property2: b;
}

, .selector3:extend(.selector1 all){};เอาต์พุต:

.selector1,
.selector3 {
  property1: a;
}
.selector1 .selector2,
.selector3 .selector2 {
  property2: b;
}

, .selector3:extend(.selector2){};เอาต์พุต

.selector1 {
  property1: a;
}
.selector1 .selector2 {
  property2: b;
}

และสุดท้าย.selector3:extend(.selector2 all){};:

.selector1 {
  property1: a;
}
.selector1 .selector2,
.selector1 .selector3 {
  property2: b;
}

15
"ไวยากรณ์ของ LESS" ซื่อสัตย์ "กับ CSS แบบดั้งเดิมมากกว่า@extendไวยากรณ์at-rule ( ) ที่ใช้งานโดย SASS และ Stylus ซึ่งโดยทั่วไปจะสงวนไว้สำหรับการให้คำสั่งหรือคำสั่งไปยังโปรแกรมแยกวิเคราะห์ CSS ในเบราว์เซอร์" <- นี่มันหมายความว่ายังไง? กลิ่นเหมือนการตลาด
cimmanon


2
@cimmanon ฉันเดาว่าคุณพูดถูกฉันไม่ได้ตั้งใจจะฟังแบบนั้น แต่มีข้อขัดแย้งมากมายเกี่ยวกับไวยากรณ์ของ Less ซึ่งดูเหมือนเป็นเพราะผู้คนคาดหวังว่า Less จะใช้ไวยากรณ์เดียวกันกับ SASS แต่ใน CSS pseuso-selectors ใช้สำหรับกฎการจับคู่รูปแบบเพื่อพิจารณาว่ากฎลักษณะใดที่ใช้กับองค์ประกอบในโครงสร้างเอกสารในขณะที่กฎจะใช้สำหรับคำสั่ง "ระดับที่สูงขึ้น" (ดังที่ฉันกล่าวถึง) ดังนั้นฉันควรแก้ไขคำตอบเพื่อให้รายละเอียดนั้น? หรือนั่นคือคำถามอื่น: "เหตุใด LESS จึงเลือกไวยากรณ์ตัวเลือกหลอก"
jonschlinkert

4
คุณควรอัปเดตเอกสารออนไลน์น้อยลงจริงๆฉันไม่เห็นอะไรเกี่ยวกับ: expand () และคงจะดีที่จะรู้ก่อนหน้านี้
Joshua Bambrick

2
เอกสารประกอบเช่นเดียวกับรหัสได้รับการดูแลโดยชุมชน ข้อเสนอแนะประเภทนี้จะดีมากสำหรับ repo จริงและยินดีต้อนรับคำขอดึงเสมอ ;-)
jonschlinkert

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.