Bagaimanakah ampersand (&) berfungsi dalam LESS apabila digunakan dengan elemen pseudo CSS?

Ampersan dalam Unsur Pseudo CSS: Trik KURANG

Dalam CSS, ampersand (&) biasanya digunakan bersama dengan unsur pseudo, seperti :sebelum dan :selepas. Walau bagaimanapun, dalam contoh yang diberikan daripada Twitter Bootstrap, ampersand digunakan dengan cara yang sedikit berbeza.

Sintaks yang dimaksudkan ialah:

<code class="css">.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}</code>

Setelah diperiksa lebih dekat, kami menyedari bahawa ini adalah bukan CSS tulen tetapi KURANG, prapemproses CSS yang popular. Dalam KURANG, ampersand membenarkan sarang pemilih. Dengan memberi awalan elemen pseudo dengan pemilih induk (&), kita boleh mencapai perkara berikut:

<code class="less">.clearfix {
  &:before {
    content: '';
  }
}</code>

Ini akan dikompilasi kepada:

<code class="css">.clearfix:before {
  content: '';
}</code>

Tanpa ampersand, pemilih akan menyusun kepada .clearfix :before, yang bukan sintaks CSS yang sah. Oleh itu, dalam LESS, ampersand digunakan untuk menyarangkan pengubah suai pemilih, membolehkan kod yang lebih ringkas dan boleh dibaca.

Atas ialah kandungan terperinci Bagaimanakah ampersand (&) berfungsi dalam LESS apabila digunakan dengan elemen pseudo CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!