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

Jawaban:

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