SASS มีคุณสมบัติที่เรียกว่า@extend
ซึ่งทำให้ตัวเลือกสามารถสืบทอดคุณสมบัติของตัวเลือกอื่นได้ แต่ไม่ต้องคัดลอกคุณสมบัติ (เช่นมิกซ์อิน)
LESS มีคุณสมบัตินี้ด้วยหรือไม่?
SASS มีคุณสมบัติที่เรียกว่า@extend
ซึ่งทำให้ตัวเลือกสามารถสืบทอดคุณสมบัติของตัวเลือกอื่นได้ แต่ไม่ต้องคัดลอกคุณสมบัติ (เช่นมิกซ์อิน)
LESS มีคุณสมบัตินี้ด้วยหรือไม่?
คำตอบ:
ใช่ 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;
}
@extend
ไวยากรณ์at-rule ( ) ที่ใช้งานโดย SASS และ Stylus ซึ่งโดยทั่วไปจะสงวนไว้สำหรับการให้คำสั่งหรือคำสั่งไปยังโปรแกรมแยกวิเคราะห์ CSS ในเบราว์เซอร์" <- นี่มันหมายความว่ายังไง? กลิ่นเหมือนการตลาด
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
.sibling-1();
}
เอาต์พุต
.sibling-1 {
color: red
}
.sibling-2 {
background-color: #fff;
color: red
}