DAHA AZ CSS yuvalama sınıfı

101

CSS'mi geliştirmek için LESS kullanıyorum ve bir sınıfı bir sınıfa yerleştirmeye çalışıyorum. Oldukça karmaşık bir hiyerarşi var ama bazı nedenlerden dolayı benim yuvam çalışmıyor. Bu bende var:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
    .posted {
         .my-posted;
         span {
            border: none;
         }
    }
}

Ben alamayan .g.postedişe. sadece .gbiraz gösteriyor . Bunu yaparsam sorun değil:

.g {
    float: left;
    color: #323a13;
    .border(1px,#afc945);
    .gradient(#afc945, #c8da64);
    .common;
    span {
        .my-span;
        .border-dashed(1px,rgba(255,255,255,0.3));
    }
}

.g.posted {
         .my-posted;
         span {
            border: none;
         }
    }

Yuvayı istiyorum .postediçinde .golsa. Herhangi bir fikir?

css nested less

— newbie_86
kaynak

Yanıtlar:

192

&Karakteri bir işlevi vardır thisanahtar kelime, aslında (bir şey cevabı yazma anda bilmiyordum). Yazmak mümkündür:

.class1 {
    &.class2 {}
}

ve oluşturulacak CSS şu şekilde görünecektir:

.class1.class2 {}

Kayıt için, @grobitto bu bilgiyi gönderen ilk kişiydi.

[ORİJİNAL CEVAP]

LESS bu şekilde çalışmaz.

.class1.class2 {} - aynı DOM düğümünde iki sınıf tanımlar, ancak

.class1 {
    .class2 {}
}

iç içe geçmiş düğümleri tanımlar. .class2yalnızca sınıfla bir düğümün alt öğesi ise uygulanacaktır class1.

Bununla ben de kafam karıştı ve sonucum şu ki LESS'in bir thisanahtar kelimeye ihtiyacı var :).

— mingolar
kaynak

sass& operatörü ile yerleşik bu işlevselliğe sahiptir.

— sevenseacat

LESS, özellikle değiştirilmiş, daha esnek sözdizimi ile PHP LESS ön işlemcisi hala harika. Ancak genel olarak kabul edilen bir tür sözdizimi olana kadar, bu tür sorunlar zaman zaman ortaya çıkacaktır. Benim görüşüme göre, bu DAHA AZ 'tek dezavantaj.

— mingos

@ newbie_86 sass ve yerel css sözdizimini karıştıramazsınız. Bu nedenle, Sass'a geçiş, stillerinizin tamamen yeniden yazılmasını gerektirirken, daha azında zaten mevcut stillerinizi derleyebilir ve bunları parça parça yeniden yazmaya başlayabilirsiniz.

— üstsüz

Aynı ve ikinci bir tarihi olmasına rağmen, ikinci cevabın neden bundan daha fazla arttığını merak ettim. Sonra son cümleyi gördüm ve her iki cevabı da yükselttim

— llamerr

@topless "sass ve native css sözdizimini karıştıramazsınız" derken neyi kastediyorsunuz bunu yıllardır yapıyorum. Benim için harika çalışıyor.

— shanimal

115

.g {
    &.posted {
    }
}

.posted'den önce "&" eklemelisiniz

— Grobitto
kaynak

Ve işareti, iç içe yerleştirmede alt öğenin hemen yanında bulunuyorsa, çift sınıf seçici olarak derlenir. & Ve selector arasında boşluk varsa, alt seçicide derlenecektir. Less'te yuvalama hakkında daha fazla bilgiyi buradan okuyun .

— Nesha Zoric
kaynak