LESS.js + @arguments + Passer un argument

Question

J'ai cherché sur Google, etc., mais je n'ai pas trouvé ce que je cherchais (j'espère n'avoir rien manqué).. Donc j'ai pensé que ma meilleure option était de vous demander à vous les gars :)

Je m'amuse avec LESS-JS pour la première fois et j'aime vraiment ça. Cependant, j'ai un petit problème maintenant.

J'utilise la variable @arguments comme ceci:

.basicBorder(@width:1px, @type:solid, @color:@black){
    border:@arguments;
}

Ce qui fonctionne comme prévu. Maintenant, quand je veux que la bordure soit rouge, j'ajoute cela à l'élément dans mon css:

.basicBorder(1px, solid, @red);

Ce qui fonctionne également comme prévu. Cependant, j'aimerais éviter d'écrire 1px, solid,, puisque ce sont déjà mes valeurs par défaut, mais quand j'essaie ceci:

.basicBorder(@red);

Ou ceci:

.basicBorder(,,@red);

Cela ne fonctionne pas.

Donc je me demandais si quelqu'un sait comment je pourrais "sauter" les 2 premières variables afin de pouvoir simplement entrer la couleur au cas où je ne voudrais pas que la largeur et le type de bordure soient modifiés.

J'espère que vous comprenez ce que j'essaie de dire !

Cordialement!

Answer 1

Vous pouvez en fait nommer les paramètres ultérieurs et sauter les premiers. La syntaxe de votre question est :

.basicBorder(@color:@red);

Vous pouvez également utiliser des arguments ordonnés normalement au début et extraire des arguments nommés du reste des paramètres :

.basicBorder(2px, @color:@red);

Cela définit @width à 2px, @type par défaut et @color à @red. Vraiment pratique si vous avez des arguments moins utilisés.

Answer 2

Les mixins paramétriques dans LESS fonctionnent un peu comme les fonctions JavaScript, vous ne pouvez pas sauter les premiers paramètres. Donc si vous voulez seulement changer la couleur, vous pourriez réécrire le mixin comme ceci :

.basicBorder(@color:@black, @width:1px, @type:solid){
    border:@width @type @color;
}

Ensuite, vous seriez capable de l'appeler comme ceci :

.basicBorder(@red);
.basicBorder(@red, 2px, dotted);

éditer
En utilisant votre mixin d'origine, vous pourriez aussi créer ceux-ci

.basicBorderType(@type) {
    .basicBorder(1px, @type, @black);
}
.basicBorderColor(@color) {
    .basicBorder(1px, solid, @color);
}

Maintenant vous pourriez écraser n'importe lequel des styles :

.basicBorderType(dotted); //1px dotted black;
.basicBorderColor(@red);  //1px solid red;
.basicBorder(2px);        //2px solid black;

Un peu piraté, mais c'est la seule chose à laquelle je peux penser pour vous aider...