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