ตัวแปรภายในตัวเลือกใน LESS
ตัวแปรสามารถใช้งานได้ภายในตัวเลือกเช่นกัน
อย่างไรก็ตามสำหรับกรณีนี้จำเป็นต้องใช้
ไวยากรณ์การแทรกตัวแปรที่แตกต่างออกไปเล็กน้อย:
หลังจาก @ ชื่อตัวแปรต้องถูก
ใส่ไว้ในวงเล็บปีกกา ลองดูตัวอย่าง
สมมติว่าเรามีตัวแปรต่อไปนี้:
@var: div;
ลองทำการแทรกตัวแปรนี้ เข้าในตัวเลือก ลองพิจารณากรณีต่างๆ
ตัวอย่าง
ทำการแทรกตัวแปรของเราในฐานะ ตัวเลือก:
@{var} {
font-size: 20px;
}
ผลลัพธ์การคอมไพล์:
div {
font-size: 20px;
}
ตัวอย่าง
สมมติว่าตอนนี้ตัวแปรของเรามีเพียงบางส่วน ของตัวเลือก:
main @{var} {
font-size: 20px;
}
ผลลัพธ์การคอมไพล์:
main div {
font-size: 20px;
}
ตัวอย่าง
สมมติว่าตอนนี้เราบอกว่าในตัวแปรของเรา
ไม่ได้เก็บชื่อแท็ก แต่เก็บ id ของมัน
เพิ่มเครื่องหมาย # หน้าชื่อตัวแปร:
#@{var} {
font-size: 20px;
}
ผลลัพธ์การคอมไพล์:
#div {
font-size: 20px;
}
ตัวอย่าง
สมมติว่าตอนนี้เราบอกว่าในตัวแปรของเรา ไม่ได้เก็บชื่อแท็ก แต่เก็บคลาสของมัน เพิ่ม จุดหน้าชื่อตัวแปร:
.@{var} {
font-size: 20px;
}
ผลลัพธ์การคอมไพล์:
.div {
font-size: 20px;
}
โจทย์ฝึกปฏิบัติ
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: ul;
@{var} {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: ul;
div @{var} {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: ul;
div @{var} {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: ul;
@{var} li {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: list;
.@{var} {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: list;
#@{var} li {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: list;
.@{var} li {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: list;
ul.@{var} li {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: list;
ul.@{var} li {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: .block;
ul@{var} {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: .block;
ul@{var} li {
font-size: 20px;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var: a;
@{var}:hover {
text-decoration: none;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var1: div;
@var2: a;
@{var1} @{var2}:hover {
text-decoration: none;
}
บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:
@var1: block1;
@var2: block2;
.@{var1}.@{var2} {
font-size: 20px;
}
