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?

css nested less newbie_86
sumber

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 :).

mingos
sumber
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
115 
.g {
    &.posted {
    }
}

Anda harus menambahkan "&" sebelum .posted

grobitto.dll
sumber
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 .

Nesha Zoric
sumber