Jak przekonwertować wartość numeryczną na procentowy (lub) symbol procentu dołączenia do liczby?

Question

Próbuję użyć mniej css aby wykonać następujące czynności:

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

Problem jednak jest, że produkcja staje się:

width: 35.13909224011713 '%'; 

Jak zrobić to wykonalne? tj .:

width: 35.13909224011713%; 

Answer 1

Jest możliwe użycie string interpolation:

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

To będzie wyjście

width: 35.13909224011713%; 

Dodatkowo, jeśli ma to być zaokrąglone, można użyć round().

Answer 2

Mimo że to pytanie jest dość stare, chcę dodać jeszcze kilka przykładów dodawania. Mniej ustawi twoje jednostki na to, na czym działa.

10px + 20px 

wyjście wola 30px

(20/200) * 100% 

wyjście wola 10%

Więc z jednostek nie musisz łączyć pomiar jednostkowej.

Odkryłem, że dodanie 0 pomaga, gdy nie wiesz, jaka może być wartość jednostki.

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

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

Powyższa klasa będzie miała szerokość 20%. Jeśli dodamy piksel, to będzie to 20 pikseli.

Answer 3

Z jakiegoś powodu najmniej gadatliwa i najbardziej oczywista metoda jest tu trochę nieobecna (w rzeczywistości jest to odpowiedź Richarda Testaniego, ale tam jest utrudniony dalszy kod prowadzący do niewłaściwego kierunku). Więc ... Odpowiedź na oryginalny:

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

jest tak proste, jak:

width: (480/1366*100%); 

---

Mówiąc o percentage:

go robi to samo, ale osobiście nigdy nie użyłbym go ze względu na jego gadatliwość i nieczytelność. Przy szybkim skanowaniu percentage(480/1366) czyta się podobnie jak peekabooze(480/1366), więc musisz zatrzymać się i wpatrywać w niego, aby uzyskać wskazówkę. W przeciwieństwie do wyraźnego pojawienia się % w 480/1366*100% (lub 480/1366 * 100%) sprawia, że ​​łatwiej zauważyć.