Pemilih anak langsung di LESS

112

Apakah ada cara agar LESS menerapkan selektor anak langsung (>) dalam keluarannya?

Dalam style.less saya, saya ingin menulis sesuatu seperti:

.panel {
    ...
    > .control {
        ...
    }
}

dan LESS menghasilkan sesuatu seperti:

.panel > .control { ... }

css css-selectors less

— Dave
sumber

stackoverflow.com/questions/7634932/less-js-strong-nested-rules

— tigapuluhdot

15

Anehnya, potongan pertanyaan Anda ternyata merupakan jawaban yang benar.

— tigapuluhdot

@thirtydot Tentu, kecuali itu tidak berfungsi ... tidak jika Anda tidak menghapus spasi atau menambahkan "&". Saya menggunakan less.js. Tidak bisa memastikan untuk parser lain.

— Dave

2

Saya baru saja mengujinya, dan kode asli dari pertanyaan Anda berfungsi di less.js. Lihat sendiri: jsfiddle.net/thirtydot/vcE8t

— tigapuluhdot

1

Ya, maafkan saya, ini berfungsi seperti pesona dengan ruang. 1 untuk Anda. Saya tidak tahu bagaimana itu tidak berhasil untuk saya selama berjam-jam kemarin ... kalau tidak saya tidak akan memposting pertanyaan itu.

— Dave

144

MEMPERBARUI

Sebenarnya, kode dalam pertanyaan awal berfungsi dengan baik. Anda bisa tetap menggunakan >pemilih anak.

Temukan jawabannya.

.panel {
    ...
    >.control {
        ...
    }
}

Perhatikan kurangnya spasi antara ">" dan ".", Jika tidak maka tidak akan berfungsi.

— Dave
sumber

4

Saya tidak akan meragukan bahwa ini adalah bug jika tidak berfungsi dengan ruang di sana, kecuali didokumentasikan secara khusus.

— BoltClock

Ini hanya membodohi parser. Ia melihatnya sebagai pemilih tunggal, jadi Anda mengerti .panel >.control.

— Ricardo Tomasi

Saya menganggapnya sebagai fitur daripada bug. Ini jauh lebih konsisten bila Anda menggunakannya dengan cara ini dibandingkan dengan "&". Saya pikir ini adalah kode yang lebih jelas jika Anda hanya menggunakan "&" dengan pseudo-class dan bukan kelas anak.

— Dave

1

Ini adalah fitur CSS, yang menerima div > pdan div>p. Konsistensi akan selalu menggunakan spasi di antara penyeleksi (lihat CSS yang dihasilkan).

— Ricardo Tomasi

Tentu, tapi saya lebih mementingkan konsistensi penggunaan &.

— Dave

78

Cara resmi:

.panel {
  & > .control {
    ...
  }
}

& selalu mengacu pada pemilih saat ini.

Lihat http://lesscss.org/features/#features-overview-feature-nested-rules

— Ricardo Tomasi
sumber

1

Saya pikir ini juga hanya membodohi pengurai (seperti yang Anda rasakan tentang jawaban lain). Biar saya jelaskan. Seperti yang Anda katakan, & selalu mengacu pada pemilih (induk) saat ini. Jadi apa pun setelah itu harus berlaku untuk orang tua. Dan, itulah peran kelas-semu. Kelas anak langsung lebih dekat dengan kelas anak terkesiap **** daripada kelas semu. Jadi menggunakan just> lebih intuitif dan logis.

— Dave

6

Menurut Anda mana yang lebih benar? div > patau div >p? The &combinator adalah cara kanonik melakukannya di KURANG, bukan perasaan saya. Penjelasan Anda rethorical. Beberapa orang menulis CSS mereka dalam satu baris ...

— Ricardo Tomasi

Kebanyakan orang menggunakan LESS sehingga mereka tidak perlu peduli dengan CSS sebenarnya yang dihasilkan. Bagaimanapun, ternyata space tersebut dapat digunakan setelah>. Jadi & benar-benar berlebihan.

— Dave

13

Sintaks yang benar akan mengikuti saat menggunakan '&' akan menjadi redundan di sini.

.panel{
   > .control{
   }
}

Menurut panduan yang lebih sedikit , '&' digunakan untuk membuat parameter leluhur (tetapi tidak diperlukan di sini). Dalam contoh yang lebih sedikit ini , &: hover sangat penting di atas : hover jika tidak maka akan menghasilkan kesalahan sintaksis. Namun, tidak ada persyaratan sintaksis untuk menggunakan '&' di sini. Jika tidak, semua sarang akan membutuhkan '&' karena pada dasarnya mengacu pada induk.

— sbharti
sumber

1

@JJF tidak ada pertanyaan karena itu adalah jawaban?

— Bill Woodger

0

Jika Anda perlu menargetkan lebih banyak pemilih:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}

— stojsins
sumber

-1

Selain itu, Jika Anda menargetkan elemen anak pertama, seperti yang pertama <td>dari a <tr>, Anda dapat menggunakan sesuatu seperti ini:

tr {
    & > td:first-child {font-weight:bold;}
}

ini membantu mengurangi deklarasi kelas saat tidak diperlukan.

— seth yount
sumber