less :: Comment ne pas compiler les mixins

Récemment, après avoir beaucoup utilisé les mixins avec Less, j’ai constaté après coup que ces mêmes mixins étaient également générés dans la feuille de style compilée. Cela provoquait dans mon cas une duplication du code.

Mixin dans les CSS compilé

Pour ne pas avoir les mixins dans les CSS compilés par Less, il s’agit juste d’ajouter () après le nom du mixin (si celui-ci n’a pas de paramètres). Sinon, comme nous le verrons, ce n’est pas nécessaire.

Cet article: How to use Mixins in LESS, a CSS Preprocessor décrit bien le processus global des mixins.

Finalement, le mixin doit être vu comme un ensemble de règles CSS qui peut être intégré dans d’autres déclarations. D’où le fait qu’il soit généré dans les CSS quand il n’a pas d’autres paramètres attachés. Il a une existence à part, en tant que déclaration et il peut être injecté dans d’autres déclarations comme le ferait une variable.

Exemple de mixin simple

Dans ce cas .traitsCommuns sera généré dans les CSS compilés

.traitsCommuns {
    border-radius: 10px;
    border: 5px solid #b92815;
    padding: 10px;
}

header {
    color: #274D87;
    .traitsCommuns;
}

Et nous aurons au final dans les CSS:

.traitsCommuns {
    border-radius: 10px;
    border: 5px solid #b92815;
    padding: 10px;
}

header {
    color: #274D87;
    border-radius: 10px;
    border: 5px solid #b92815;
    padding: 10px;
}

Exemple de mixin avec paramètre vide

Dans cet autre cas, le même mixin ne sera généré que dans les déclarations où il est utilisé. Ici dans le header.

.traitsCommuns() {
    border-radius: 10px;
    border: 5px solid #b92815;
    padding: 10px;
}

header {
    color: #274D87;
    .traitsCommuns;
}

Et nous aurons au final dans les CSS:

header {
    color: #274D87;
    border-radius: 10px;
    border: 5px solid #b92815;
    padding: 10px;
}

Exemple de mixins avec paramètres actifs (parameterized mixins)

Dans ce dernier cas, le mixin ne sera généré que dans le cadre d’une déclaration, ici #maboite

.border-radius(@radius: 5px) {
    -mox-border-radius: @radius;
    -webkit-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}   

Dans l’utilisation, le paramètre n’est pas obligatoire, car j’ai déterminé un paramètre par défaut: @radius: 5px

#maboite {
    .border-radius;
    background-color: red;
    width: 200px;
    height: 100px;
}

Et nous aurons au final dans les CSS:

#maboite {
    .border-radius;
    background-color: red;
    width: 200px;
    height: 100px;
    -mox-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}   

Note: Je compte bien faire des tutoriels plus complets sur Less.