css - CSS Calc() 的替代品？LESS 或 SASS 可以对像素进行百分比计算吗？

Question

我一直在寻找一种在不使用 calc() 的情况下对像素进行百分比计算的方法。我希望能够使用 calc，但目前移动 safari (ios) 在 ios6 之前不支持它。有没有办法在LESS中做到这一点？我知道你可以做计算，但据我所知，你不能做 100% - 20px 之类的事情。有什么建议么？

Answer 1

不。

当我第一次发现LESS时，我花了一段时间寻找这个，恐怕这是不可能的。LESS 不包含渲染引擎，因此无法准确计算出父元素的百分比宽度。特别是因为该父元素通常可能具有可变宽度。

如果父级是固定宽度，您当然可以使用 LESS 为您计算像素：

@containerWidth: 500px;
.container {width: @containerWidth;}
.child {width: @containerWidth / 5;}

Answer 2

LESS 和 SASS 都不能在渲染后进行计算。他们所做的计算是呈现浏览器随后解释的初始 CSS 文件。它们都生成 100% 有效的 CSS。CSS 可以做的任何事情，SASS 和 LESS 都可以输出（但通常不那么冗长和费力）；但是，如果 CSS 没有办法做到这一点，那么 SASS 或 LESS 也没有办法做到这一点。

您也许可以摆脱使用 Javascript：

$('some-element').css('margin-left', $('.my-element').width() - 15)