如何將數字值轉換爲百分比（或）將百分比符號追加到數字中？

Question

我想少用CSS來做到以下幾點：

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

的問題是，雖然輸出變爲：

width: 35.13909224011713 '%'; 

如何使它能夠發揮作用？即：

width: 35.13909224011713%; 

Answer 1

它可以使用string interpolation：

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

這將輸出

width: 35.13909224011713%; 

此外，如果你希望它是圓的，你可以使用round()。

Answer 2

即使這個問題很老，我想添加一些關於添加的例子。減少將你的單位設置爲正在操作的任何東西。

10px + 20px 

將輸出30像素

(20/200) * 100% 

將輸出10％

所以你不需要來串聯單元的測量單位。

我發現當你不知道單位值可能是多少時，加0會有幫助。

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

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

上述類的寬度爲20％。如果我們添加了px，它將是20px。

Answer 3

出於某種原因，最簡單和最明顯的方法是在這裏失蹤（它實際上是Richard Testani的答案，但是在那裏它會阻礙進一步的代碼導致錯誤的方向）。所以...... 答案原文：

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

很簡單，只要：

width: (480/1366*100%); 

說起 percentage

---

：

它也做了這個伎倆，但我個人從來沒有使用它的冗長和不可讀性。在快速掃描percentage(480/1366)就像peekabooze(480/1366)，所以你必須停下來盯着它才能得到線索。相反%在480/1366*100%（或480/1366 * 100%）中的顯式外觀使其更易於引人注目。