Làm thế nào để chuyển đổi một giá trị số thành một tỷ lệ phần trăm (hoặc) gắn thêm biểu tượng phần trăm vào một số?

Question

Tôi đang cố gắng sử dụng css LESS phải làm như sau:

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

Vấn đề mặc dù được rằng sản lượng trở thành:

width: 35.13909224011713 '%'; 

Làm thế nào để làm cho nó hoàn toàn khả thi? tức là .:

width: 35.13909224011713%; 

Answer 1

Có thể sử dụng string interpolation:

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

Điều đó sẽ ra

width: 35.13909224011713%; 

Ngoài ra, nếu bạn muốn nó được làm tròn, bạn có thể sử dụng round().

Answer 2

Mặc dù câu hỏi này khá cũ, tôi muốn thêm một vài ví dụ khác về việc thêm. Ít hơn sẽ thiết lập các đơn vị của bạn cho bất cứ điều gì đang được vận hành.

10px + 20px 

chí đầu ra 30px

(20/200) * 100% 

chí đầu ra 10%

Vì vậy, với các đơn vị bạn không cần phải nối đo đơn vị.

Tôi nhận thấy rằng việc thêm 0 sẽ giúp ích khi bạn không biết giá trị đơn vị có thể là gì.

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

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

Lớp học trên sẽ có chiều rộng 20%. Nếu chúng ta thêm vào với px, nó sẽ là 20px.

Answer 3

Vì lý do nào đó, phương pháp tiết kiệm nhất và rõ ràng nhất là thiếu ở đây (trong câu trả lời của Richard Testani thực sự nhưng nó bị cản trở với mã tiếp theo dẫn đến sai hướng). Vì vậy, ... Câu trả lời cho bản gốc:

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

cũng đơn giản như:

width: (480/1366*100%); 

---

Nói về percentage:

nó không phải là lừa quá nhưng cá nhân tôi sẽ không bao giờ sử dụng nó cho verbosity của nó và không dễ đọc. Tại quét nhanh percentage(480/1366) lần đọc giống như peekabooze(480/1366), do đó bạn phải dừng lại và nhìn chằm chằm vào nó để có được một đầu mối. Trái ngược với sự xuất hiện rõ ràng của % trong 480/1366*100% (hoặc 480/1366 * 100%) làm cho nó dễ dàng nhận thấy hơn.