LESS-এ ক্লাস এক্সটেন্ড
মিক্সিনের অসুবিধা হল এটি কোড ডুপ্লিকেশন তৈরি করে। আসুন একটি উদাহরণ দিয়ে দেখি, এটার মানে কি।
ধরুন আমাদের নিম্নলিখিত কোড আছে:
.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
এই কোডটি নিম্নলিখিতভাবে কম্পাইল হবে, ডুপ্লিকেশন তৈরি করে:
.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
এটি আরও কম্প্যাক্ট হত যদি এই কোডটি নিম্নলিখিতভাবে কম্পাইল হত:
.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
এটি &:extend কমান্ড ব্যবহার করে অর্জন করা যেতে পারে,
যা সরাসরি কোডে মিক্স ইনসার্ট না করে
বরং নির্দিষ্ট ক্লাসটি প্রসারিত করে। আসুন
আমাদের কোড ঠিক করি:
.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
বলুন, নিম্নলিখিত কোডের কম্পাইলেশন ফলাফল কি হবে:
.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
বলুন, নিম্নলিখিত কোডের কম্পাইলেশন ফলাফল কি হবে:
.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
বলুন, নিম্নলিখিত কোডের কম্পাইলেশন ফলাফল কি হবে:
.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
বলুন, নিম্নলিখিত কোডের কম্পাইলেশন ফলাফল কি হবে:
.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
বলুন, নিম্নলিখিত কোডের কম্পাইলেশন ফলাফল কি হবে:
.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}
