LESS'te Acil Çocuk seçici

112

Çıkışında acil alt seçiciyi (>) LESS uygulamasına sahip olacak bir şey var mı?

Benim tarzımda .less, şöyle bir şey yazmak istiyorum:

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

ve LESS'in aşağıdaki gibi bir şey oluşturmasını sağlayın:

.panel > .control { ... }

css css-selectors less

— Dave
kaynak

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

— otuzdot

15

Eğlenceli bir şekilde, sorunuzdaki pasaj zaten doğru cevaptı.

— otuz nokta

@thirtydot Elbette, işe yaramaması dışında ... alanı kaldırmazsanız veya "&" eklemazsanız. Less.js kullanıyorum. Diğer ayrıştırıcılar için kesin olarak söyleyemem.

— Dave

2

Sadece bunu test ettik ve sorunuza orijinal kod yapar less.js. iş Kendiniz görün: jsfiddle.net/thirtydot/vcE8t

— otuzdot

1

Evet özür dilerim, alanla büyülüyor. +1 sizin için. Dün saatlerce benim için nasıl işe yaramadı bilmiyorum ... aksi takdirde soruyu göndermezdim.

— Dave

144

GÜNCELLEME

Aslında, orijinal sorudaki kod iyi çalışıyor. >Çocuk seçiciye sadık kalabilirsiniz .

Cevabı buldum.

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

">" Ve "." Arasında boşluk olmadığına dikkat edin, aksi takdirde çalışmaz.

— Dave
kaynak

4

Özellikle belgelenmediği sürece, orada bir boşlukla çalışmıyorsa bunun bir hata olduğundan şüphem yok.

— BoltClock

Bu sadece ayrıştırıcıyı kandırmaktır. Bunu tek bir seçici olarak görür, böylece elde edersiniz .panel >.control.

— Ricardo Tomasi

Bunu bir hata yerine bir özellik olarak alıyorum. "&" Yerine bu şekilde kullandığınızda çok daha tutarlı olur. Alt sınıflar yerine yalnızca sözde sınıflarla "&" kullanırsanız daha açık bir kod olduğunu düşünüyorum.

— Dave

1

Hem div > pve hem de kabul eden bir CSS özelliğidir div>p. Tutarlılık her zaman seçiciler arasında boşluk kullanır (oluşturulan CSS'ye bir göz atın).

— Ricardo Tomasi

Elbette, ama daha çok & kullanmanın tutarlılığıyla ilgileniyordum.

— Dave

78

Resmi yol:

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

& her zaman geçerli seçiciyi ifade eder.

Bkz. Http://lesscss.org/features/#features-overview-feature-nested-rules

— Ricardo Tomasi
kaynak

1

Sanırım bu aynı zamanda ayrıştırıcıyı kandırıyor (diğer cevap hakkında hissettiğiniz gibi). Açıklamama izin ver. Dediğin gibi, & her zaman geçerli (ana) seçiciye atıfta bulunur. Öyleyse, bundan sonraki her ne ise ebeveyne de uygulanmalıdır . Ve bu sözde sınıfların rolü. Acil çocuk sınıfları sahte sınıflardan çok **** gasp **** çocuk sınıflarına daha yakındır. Yani sadece> kullanmak daha sezgisel ve mantıklı.

— Dave

6

Sence hangisi daha doğru? div > pveya div >p? Birleştirici &, bunu duygularım değil, DAHA AZ olarak yapmanın kanonik yoludur. Açıklamanız retorik. Bazı insanlar

— CSS'lerini

Çoğu insan LESS kullanır, böylece oluşturulan gerçek CSS'yi önemsemek zorunda kalmazlar. Her neyse, uzayın> sonrasında kullanılabileceği ortaya çıktı. So & tamamen gereksizdir.

— Dave

13

Doğru sözdizimi, '&' kullanılırken takip edilecektir burada gereksiz olacaktır.

.panel{
   > .control{
   }
}

Daha az yönergeye göre , ataları parametreleştirmek için '&' kullanılır (ancak burada böyle bir ihtiyaç yoktur). Gelen bu daha az örnekte , &: hover esansiyel bitti : hover aksi takdirde sözdizimsel hata ile sonuçlanır. Bununla birlikte, burada "&" kullanımı için böyle bir sözdizimsel gereklilik yoktur. Aksi takdirde, esasen ebeveyni ifade ettikleri için tüm yuvalar '&' gerektirecektir.

— sbharti
kaynak

1

@JJF bir cevap olduğu için soru yok mu?

— Bill Woodger

0

Daha fazla seçiciyi hedeflemeniz gerekirse:

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

— stojsins
kaynak

-1

Böyle ilk olarak ilk çocuk elemanı, hedefliyorsanız Ayrıca, <td>a <tr>, böyle bir şey kullanabilirsiniz:

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

bu, ihtiyaç duyulmadığında sınıf bildirimlerinin azaltılmasına yardımcı olur.

— seth yount
kaynak