Extension des classes dans LESS
L'inconvénient des mixins est qu'elles entraînent une duplication de code. Regardons un exemple pour comprendre ce que cela signifie.
Supposons que nous ayons le code suivant :
styles.less.mix {
width: 100px;
height: 100px;
}
p {
.mix;
color: red;
}
Ce code sera compilé de la manière suivante, en générant une duplication :
styles.css.mix {
width: 100px;
height: 100px;
}
p {
width: 100px;
height: 100px;
color: red;
}
Ce serait plus compact si ce code était compilé de la manière suivante :
styles.css.mix, p {
width: 100px;
height: 100px;
}
p {
color: red;
}
Ceci peut être réalisé en utilisant la commande &:extend,
qui n'insère pas le mixin directement dans
le code, mais étend la classe spécifiée. Corrigeons
notre code :
styles.less.mix {
width: 100px;
height: 100px;
}
p {
&:extend(.mix);
color: red;
}
Expliquez quel sera le résultat de la compilation du code suivant :
styles.less.mix {
color: red;
font-size: 20px;
}
p {
&:extend(.mix);
width: 300px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
styles.less.mix {
color: red;
font-size: 20px;
}
#block p {
&:extend(.mix);
width: 300px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
styles.less.mix {
color: red;
font-size: 20px;
}
#block p, #block div {
&:extend(.mix);
width: 300px;
}
Expliquez quel sera le résultat de la compilation du code suivant :
styles.less.mix {
color: red;
font-size: 20px;
}
#block {
width: 300px;
p {
height: 100px;
&:extend(.mix);
}
div {
height: 200px;
&:extend(.mix);
}
}
Expliquez quel sera le résultat de la compilation du code suivant :
styles.less.mix1 {
color: red;
}
.mix2 {
font-size: 20px;
}
div {
width: 300px;
&:extend(.mix1);
&:extend(.mix2);
}