Comment convertir une valeur numérique en pourcentage (ou) ajouter le symbole du pourcentage à un nombre ?

Question

J'essaie d'utiliser LESS css pour faire ce qui suit :

width: ((480/1366)*100)+'%';

Le problème, c'est que le résultat devient :

width: 35.13909224011713 '%';

Comment faire pour que ce soit réalisable ? ie.. :

width: 35.13909224011713%;

Answer 1

Il est possible d'utiliser interpolation de chaînes de caractères :

@myvar: ((480/1366)*100);
width: ~"@{myvar}%";

Il en résultera

width: 35.13909224011713%;

En outre, si vous souhaitez qu'il soit arrondi, vous pouvez utiliser round() .

Answer 2

Bien que cette question soit assez ancienne, je souhaite ajouter quelques exemples supplémentaires concernant l'addition. Less définit vos unités sur ce qui est opéré.

10px + 20px

produira 30px

(20/200) * 100%

produira 10%

Ainsi, avec les unités, il n'est pas nécessaire de concaténer la mesure de l'unité.

J'ai constaté que l'ajout de 0 est utile lorsque l'on ne connaît pas la valeur de l'unité.

.mixin(@x, @y){
    @result: (@x / @y) * 100;
}

.my_class {
    .mixin(20, 100);
    width: @result + 0%; // you can use any unit here
}

La classe ci-dessus aura une largeur de 20 %. Si nous ajoutons px, la largeur sera de 20px.

Answer 3

Pour une raison quelconque, la méthode la moins verbeuse et la plus évidente est en quelque sorte absente ici (elle se trouve en fait dans la réponse de Richard Testani, mais elle est entravée par un code supplémentaire conduisant à une mauvaise direction). Donc... La réponse à l'original :

width: ((480/1366)*100)+'%';

est aussi simple que cela :

width: (480/1366*100%);

---

En parlant de percentage :

il fait aussi l'affaire mais personnellement je ne l'utiliserais jamais à cause de sa verbosité et de son illisibilité. En lecture rapide percentage(480/1366) se lit comme peekabooze(480/1366) Il faut donc s'arrêter et la fixer pour en avoir le cœur net. Contrairement à l'apparence explicite de % en 480/1366*100% (o 480 / 1366 * 100% ) le rend plus facilement perceptible.