Pengembangan Kelas dalam LESS
Kelemahan mixin ialah ia menghasilkan pengulangan kod. Mari kita lihat contoh untuk memahami maksudnya.
Katakan kita mempunyai kod berikut:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Kod ini akan dikompilasi seperti berikut, menghasilkan pengulangan:
styles.css.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Ia akan menjadi lebih padat jika kod ini dikompilasi seperti berikut:
styles.css.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Ini boleh dicapai dengan menggunakan arahan &:extend,
yang tidak memasukkan mixin secara langsung ke dalam
kod, tetapi mengembangkan kelas yang ditentukan. Mari
betulkan kod kami:
styles.less.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Задание 1
Terangkan apakah hasil kompilasi kod berikut:
styles.less.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Задание 2
Terangkan apakah hasil kompilasi kod berikut:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Задание 3
Terangkan apakah hasil kompilasi kod berikut:
styles.less.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Задание 4
Terangkan apakah hasil kompilasi kod berikut:
styles.less.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Задание 5
Terangkan apakah hasil kompilasi kod berikut:
styles.less.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}