KURANG kelas bertingkat CSS


101

Saya menggunakan LESS untuk meningkatkan CSS saya dan saya mencoba untuk menyusun kelas di dalam kelas. Ada hierarki yang cukup rumit tetapi karena alasan tertentu, penyarangan saya tidak berfungsi. Aku punya ini:

.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;
         }
    }
}

Saya tidak bisa mendapatkan .g.postedpekerjaan. itu hanya menunjukkan .gsedikit. Jika saya melakukan ini, tidak apa-apa:

.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;
         }
    }

Saya ingin bersarang .posteddi .gdalamnya. Ada ide?

Jawaban:


192

The &karakter memiliki fungsi dari thiskata kunci, sebenarnya (hal saya tidak tahu pada saat menulis jawabannya). Dimungkinkan untuk menulis:

.class1 {
    &.class2 {}
}

dan CSS yang akan dibuat akan terlihat seperti ini:

.class1.class2 {}

Sebagai catatan, @grobitto adalah orang pertama yang memposting informasi ini.


[JAWABAN ASLI]

LESS tidak bekerja seperti ini.

.class1.class2 {} - mendefinisikan dua kelas pada simpul DOM yang sama, tetapi

.class1 {
    .class2 {}
}

mendefinisikan node bersarang. .class2hanya akan diterapkan jika itu adalah anak dari node dengan kelas class1.

Saya juga bingung dengan ini dan kesimpulan saya adalah LESS membutuhkan thiskata kunci :).


5
sassmemiliki fungsionalitas yang dibangun dengan operator &.
sevenseacat

2
LESS masih mengagumkan, terutama preprocessor PHP LESS, dengan sintaksnya yang dimodifikasi dan lebih fleksibel. Tetapi sampai ada semacam sintaks yang diterima secara umum, masalah seperti itu akan muncul dari waktu ke waktu. Menurut saya, ini adalah satu-satunya kelemahan KURANG.
mingos

1
@ newbie_86 Anda tidak dapat mencampur sintaks sass dan css asli. Jadi, migrasi ke Sass membutuhkan penulisan ulang gaya Anda secara lengkap, sementara dalam waktu yang lebih sedikit Anda sudah dapat mengkompilasi gaya yang ada dan mulai menulis ulang sedikit demi sedikit.
topless

1
Saya penasaran kenapa jawaban kedua lebih up dari yang ini, padahal sama dan tanggal terakhir. Kemudian saya melihat kalimat terakhir dan menaikkan kedua jawaban
llamerr

@topless apa yang Anda maksud dengan "Anda tidak dapat mencampur sintaks sass dan css asli" Saya telah melakukannya selama bertahun-tahun. Bekerja dengan baik untuk saya.
Shanimal


2

Jika ampersand terletak tepat di sebelah elemen turunan dalam penumpukan, itu dikompilasi menjadi pemilih kelas ganda. Jika ada spasi antara & dan selector maka akan dikompilasi menjadi child selector. Baca lebih lanjut tentang bersarang di Less di sini .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.