Moins - en utilisant des classes créées dans des mixins protégés - css, moins

J'ai le code moins suivant:

.loop (@index) when (@index >= 10) {
(~".font@{index}") {
font-size: ~"@{index}px";
}
.loop(@index - 1);
}
.loop (0) {}
.loop (10);

quelle sortie:

.font15 {
font-size: 15px;
}
.font14 {
font-size: 14px;
}
.font13 {
font-size: 13px;
}
.font12 {
font-size: 12px;
}
.font11 {
font-size: 11px;
}
.font10 {
font-size: 10px;
}

À la fin de la Moins document j'ai cette classe:

.title{
font-size:14px;
margin-bottom:0.5em;
.font13;
}

J'utilise WinLess pour le compiler et un message d'erreur indiquant que ".font13" n'est pas défini Est-il possible d'utiliser une classe définie "dynamiquement" dans le même document?

Merci!

Réponses:

5 pour la réponse № 1

Malheureusement. L'interpolation de sélecteur est simplement une interpolation de chaîne. La chaîne est ensuite imprimée en CSS, de sorte qu'aucun objet de classe n'est généré dans l'exécution Less.

Donc, la meilleure façon de faire quelque chose comme ça serait de concevoir un getter mixin (que vous pouvez appeler depuis d'autres règles) et peut-être un générateur Mixin (qui écrit le .font10, .font11, ... .fontNN classes) ... le dernier n'est pas nécessaire si vous voulez générer les classes uniquement dans la boucle (et vous pouvez simplement le fusionner avec la boucle).

Quelque chose comme ça:

.getFont(@size) { font-size: ~"@{size}px"}

.genFontClass (@size) {
(~".font@{size}") { .getFont(@size); }
}

et alors vous pouvez utiliser votre boucle pour générer le .fontNN Des classes:

.loop (@index) when (@index >= 10) {
.genFontClass (@index);
.loop(@index - 1);
}
.loop (@index) when (@index < 10) {}

en utilisant par exemple l'indice 13:

.loop (13);

avec sortie CSS:

.font13 {
font-size: 13px;
}
.font12 {
font-size: 12px;
}
.font11 {
font-size: 11px;
}
.font10 {
font-size: 10px;
}

et indépendamment de cette classe généréequi a été imprimé directement dans le CSS de sortie (et est inaccessible par d’autres règles Less), vous pouvez appeler le getter mixin, pour ajouter les propriétés souhaitées à vos règles, dans notre exemple la police de caractères pour l’index souhaité 13:

.title{
margin-bottom:0.5em;
.getFont(13);
}

qui va maintenant ajouter la propriété de taille de police à la .title règle.

CSS:

.title {
margin-bottom: 0.5em;
font-size: 13px;
}

J'espère que cela t'aides.

---