การขยายคลาสใน LESS
ข้อเสียของมิกซินคือจะทำให้เกิดการซ้ำซ้อนของโค้ด มาดูตัวอย่างกันว่าหมายความว่าอย่างไร
สมมติว่าเรามีโค้ดต่อไปนี้:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
โค้ดนี้จะถูกคอมไพล์ออกมาเป็นดังต่อไปนี้ ทำให้เกิดการซ้ำซ้อน:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
จะกระชับกว่าถ้าโค้ดนี้ถูกคอมไพล์ออกมาเป็นดังนี้:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
เราสามารถทำได้โดยใช้คำสั่ง &:extend ซึ่งไม่มีการแทรกโค้ดของมิกซินเข้าไปโดยตรง แต่เป็นการขยายคลาสที่กำหนดไว้ ลองมาแก้ไขโค้ดของเรา:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
อธิบายว่าผลลัพธ์ของการคอมไพล์โค้ดต่อไปนี้จะเป็นอย่างไร:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
อธิบายว่าผลลัพธ์ของการคอมไพล์โค้ดต่อไปนี้จะเป็นอย่างไร:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
อธิบายว่าผลลัพธ์ของการคอมไพล์โค้ดต่อไปนี้จะเป็นอย่างไร:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
อธิบายว่าผลลัพธ์ของการคอมไพล์โค้ดต่อไปนี้จะเป็นอย่างไร:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
อธิบายว่าผลลัพธ์ของการคอมไพล์โค้ดต่อไปนี้จะเป็นอย่างไร:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
