我有一个将px转换为rem的函数。例如:
height: rem-calc(14px); // makes height: 1rem;
现在,我想从变量中进行计算。例如:
$switch-track-width: rem-calc(50px);
$switch-thumb-size: $switch-track-width / 2; // making it 25px or 1.7857rem in this case
那是行不通的,所以我尝试了其他方法:
$switch-thumb-size: ($switch-track-width / 2) + 0rem;
$switch-thumb-size: (#{$switch-track-width} / 2) + 0rem;
这两个$switch-thumb-size
示例都不起作用。现在,这是划分,但我也拿不到times (*)
,plus (+)
和minus (-)
工作。
使用2个变量进行计算时,我也遇到了问题。例如:
$switch-track-height: rem-calc(14px);
$switch-track-width: rem-calc(50px);
$switch-thumb-right: $switch-track-height - $switch-track-width;
我prever保持功能类似属性的变量内,而不是:height: rem-calc($switch-track-height);
。
如果有人可以告诉我如何在两个示例中使用SCSS变量进行计算,那将非常有帮助。
提前致谢
我设法找到了一些有效的方法。例如:
$switch-thumb-size: rem-calc(10px);
$switch-track-height: rem-calc(20px);
$something: calc( ( #{$switch-thumb-size} - #{$switch-track-height} ) / 2 );
结果是:
calc( ( 0.71428rem - 1.4285rem ) / 2 )
但是它有问题。首先,如果您知道计算所得的值始终为负,并为此-
在变量前面添加了一个符号,则它将不起作用。例子:
height: - $something; // Doesn't work
我使用此方法的第二个问题是它会创建很多冗余字符。
因为它实际上height: calc( ( 0.71428rem - 1.4285rem ) / 2 )
在您的CSS中放置了:height: -0.35684rem
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句