如何将数字值转换为百分比(或)将百分比符号追加到数字中?
我想少用CSS来做到以下几点:如何将数字值转换为百分比(或)将百分比符号追加到数字中?
width: ((480/1366)*100)+'%';
的问题是,虽然输出变为:
width: 35.13909224011713 '%';
如何使它能够发挥作用?即:
width: 35.13909224011713%;
它可以使用string interpolation:
@myvar: ((480/1366)*100);
width: ~"@{myvar}%";
这将输出
width: 35.13909224011713%;
此外,如果你希望它是圆的,你可以使用round()
。
即使这个问题很老,我想添加一些关于添加的例子。减少将你的单位设置为正在操作的任何东西。
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。
出于某种原因,最简单和最明显的方法是在这里失踪(它实际上是Richard Testani的答案,但是在那里它会阻碍进一步的代码导致错误的方向)。所以...... 答案原文:
width: ((480/1366)*100)+'%';
很简单,只要:
width: (480/1366*100%);
说起
percentage
:
类=>它也做了这个伎俩,但我个人从来没有使用它的冗长和不可读性。在快速扫描
percentage(480/1366)
就像peekabooze(480/1366)
,所以你必须停下来盯着它才能得到线索。相反%
在480/1366*100%
(或480/1366 * 100%
)中的显式外观使其更易于引人注目。
有点偏离主题,但是有计划将精度值作为编译器选项公开吗? – Harry
@Harry,nope(没有用例,参见[#1909](https://github.com/less/less.js/pull/1909))。 –
无论如何,我可以做到没有var?我试过 宽度:“@ {(237/768)* 100}%”; 但它似乎没有工作... – Joel
嘿,这又是我!当你这样做时,它变成了一个字符串。我需要一个数字......即最终的结果是宽度:“35.13909224011713%”;所以我恐怕这是行不通的。 – Joel
原来你也需要逃离字符串!所以这里是〜号的正确解决方案: @myvar:((480/1366)* 100); width:〜“@ {myvar}%”; – Joel