Less.js: :kelas semu anak pertama tidak berfungsi dengan ekstensi

Dibuat pada 11 Feb 2016 · 7Komentar · Sumber: less/less.js

Saya menggunakan kode berikut:

header {
    &:extend(.menu all);
}

Dalam file yang lebih sedikit saya memiliki struktur berikut:

.menu {// CODE}
.menu:after {// CODE}
.menu:first-child {// CODE}
.menu:last-child {// CODE}

Dalam file output, css untuk .menu dan . menu: setelah muncul. Tapi BUKAN kode untuk . menu:anak pertama atau . menu: anak terakhir.

Namun, jika saya berubah. menu:anak pertama atau . menu:anak terakhir untuk . menu: pertama dan . menu:last maka akan muncul kode css.

Tampaknya tanda hubung adalah masalahnya.

Adakah ide bagaimana cara memperbaikinya?

Terima kasih.

consider closing needs info

Sumber

moshemo

Semua 7 komentar

Saya tidak dapat mengonfirmasi hasil Anda: demo .
Dari pertanyaan Anda di SO, saya dapat melihat bahwa Anda menggunakan gulp-less , tetapi karena saya tidak dapat mengingat versi Lebih Sedikit (mulai dari 1.4.x) yang memiliki bug seperti ini, kemungkinan besar bukan semacam masalah "versi tidak terbaru atau kurang tegukan". Jadi pertanyaannya adalah: apakah Anda yakin ini _is_ cuplikan yang mengalami masalah (mungkin itu sesuatu yang lebih kompleks?), dan/atau mungkinkah tugas gulp yang mungkin mengganggu?

seven-phases-max pada 11 Feb 2016

Mungkin itu tugas tegukan. Saya akan memeriksanya besok atau awal minggu depan. Terima kasih.

moshemo pada 11 Feb 2016

Mungkin ini bisa membantu.

ivan-nikitovic pada 13 Mar 2016

😕3

Menutup karena tidak aktif (sepertinya bukan masalah Less).

seven-phases-max pada 17 Apr 2016

@seven-phases-max Saya percaya kode , disediakan di atas, persis mereproduksi masalah ini.

lebih sedikit

.col {
  float: left;

  &:last-child {
    margin-right: 0;
  }
  &:first-child {
    margin-left: 0;
  }
}

.generate-columns(<strong i="9">@n</strong>, <strong i="10">@i</strong>: 1) when (<strong i="11">@i</strong> =< @n) {
  .col-@{i}:extend(.col) {
    margin-left: (@i)px;
  }

  .generate-columns(<strong i="12">@n</strong>, (<strong i="13">@i</strong> + 1));
}

.generate-columns(2);

css yang dihasilkan

.col,
.col-1,
.col-2 {
  float: left;
}
.col:last-child {
  margin-right: 0;
}
.col:first-child {
  margin-left: 0;
}
.col-1 {
  margin-left: 1 px;
}
.col-2 {
  margin-left: 2 px;
}

css yang diharapkan:

.col,
.col-1,
.col-2 {
  float: left;
}
.col:last-child {
  margin-right: 0;
}
.col:first-child {
  margin-left: 0;
}
.col-1 {
  margin-left: 1 px;
}
.col-1:last-child {
  margin-right: 0;
}
.col-1:first-child {
  margin-left: 0;
}
.col-2 {
  margin-left: 2 px;
}
.col-2:last-child {
  margin-right: 0;
}
.col-2:first-child {
  margin-left: 0;
}

bagian yang hilang

.col-1:last-child {
  margin-right: 0;
}
.col-1:first-child {
  margin-left: 0;
}
.col-2:last-child {
  margin-right: 0;
}
.col-2:first-child {
  margin-left: 0;
}

ivan-nikitovic pada 17 Apr 2016

@ivan-nikitovic Tidak, lihat perbedaan antara extend dan extend all .

seven-phases-max pada 17 Apr 2016

@seven-phases-max ini masuk akal. :-) Terima kasih atas referensinya.

ivan-nikitovic pada 17 Apr 2016

Apakah halaman ini membantu?

0 / 5 - 0 peringkat