ตัวแปรภายในตัวเลือกใน LESS

ตัวแปรสามารถใช้งานได้ภายในตัวเลือกเช่นกัน อย่างไรก็ตามสำหรับกรณีนี้จำเป็นต้องใช้ ไวยากรณ์การแทรกตัวแปรที่แตกต่างออกไปเล็กน้อย: หลังจาก @ ชื่อตัวแปรต้องถูก ใส่ไว้ในวงเล็บปีกกา ลองดูตัวอย่าง สมมติว่าเรามีตัวแปรต่อไปนี้:

styles.less@var: div;

ลองทำการแทรกตัวแปรนี้ เข้าในตัวเลือก ลองพิจารณากรณีต่างๆ

ตัวอย่าง

ทำการแทรกตัวแปรของเราในฐานะ ตัวเลือก:

styles.less@{var} {
  font-size: 20px;
}

ผลลัพธ์การคอมไพล์:

styles.cssdiv {
  font-size: 20px;
}

ตัวอย่าง

สมมติว่าตอนนี้ตัวแปรของเรามีเพียงบางส่วน ของตัวเลือก:

styles.lessmain @{var} {
  font-size: 20px;
}

ผลลัพธ์การคอมไพล์:

styles.cssmain div {
  font-size: 20px;
}

ตัวอย่าง

สมมติว่าตอนนี้เราบอกว่าในตัวแปรของเรา ไม่ได้เก็บชื่อแท็ก แต่เก็บ id ของมัน เพิ่มเครื่องหมาย # หน้าชื่อตัวแปร:

styles.less#@{var} {
  font-size: 20px;
}

ผลลัพธ์การคอมไพล์:

styles.css#div {
  font-size: 20px;
}

ตัวอย่าง

สมมติว่าตอนนี้เราบอกว่าในตัวแปรของเรา ไม่ได้เก็บชื่อแท็ก แต่เก็บคลาสของมัน เพิ่ม จุดหน้าชื่อตัวแปร:

styles.less.@{var} {
  font-size: 20px;
}

ผลลัพธ์การคอมไพล์:

styles.css.div {
  font-size: 20px;
}

โจทย์ฝึกปฏิบัติ

Задание 1

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: ul;

@{var} {
  font-size: 20px;
}
Задание 2

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}
Задание 3

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: ul;

div @{var} {
  font-size: 20px;
}
Задание 4

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: ul;

@{var} li {
  font-size: 20px;
}
Задание 5

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: list;

.@{var} {
  font-size: 20px;
}
Задание 6

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: list;

#@{var} li {
  font-size: 20px;
}
Задание 7

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: list;

.@{var} li {
  font-size: 20px;
}
Задание 8

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}
Задание 9

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: list;

ul.@{var} li {
  font-size: 20px;
}
Задание 10

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: .block;

ul@{var} {
  font-size: 20px;
}
Задание 11

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: .block;

ul@{var} li {
  font-size: 20px;
}
Задание 12

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var: a;

@{var}:hover {
  text-decoration: none;
}
Задание 13

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var1: div;
@var2: a;

@{var1} @{var2}:hover {
  text-decoration: none;
}
Задание 14

บอกว่าผลลัพธ์การคอมไพล์จะเป็นอย่างไร สำหรับโค้ดต่อไปนี้:

styles.less@var1: block1;
@var2: block2;

.@{var1}.@{var2} {
  font-size: 20px;
}