替代CSS Calc（）？ LESS或SASS可以對像素計算執行百分比嗎？

我一直在尋找一種方法來執行百分比像素計算而不使用calc（）。我很想能夠使用calc，但目前移動Safari（ios）在ios6之前不支持它。有沒有辦法在LESS中做到這一點？我知道你可以做計算，但據我可以告訴你不能做像100％ - 20px的東西。有什麼建議麼？替代CSS Calc（）？ LESS或SASS可以對像素計算執行百分比嗎？

來源

2012-09-04 Drastick

並不是一個普遍性的解決方案，但取決於你想要什麼來完成（在你的榜樣字裏行間好像你正在嘗試使用px填充來執行百分比大小的容器）['box-sizing：border-box']（https://developer.mozilla.org/en-US/docs/CSS/box-sizing）可能很有用。 – steveax

號

我花了他在尋找，當我第一次發現有關更少，恐怕是不可能的。 LESS不包含渲染引擎，因此無法計算出父元素百分比究竟有多寬。特別是因爲通常情況下，父元素的寬度可能會變化。

如果父是固定寬度的，你當然可以用更少的計算像素爲您提供：

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

來源

2012-09-04 22:22:30

這是我害怕的答案。謝謝。 – Drastick

-1

既不LESS也不SASS可以做計算渲染後。他們所做的計算是呈現瀏覽器隨後解釋的初始CSS文件。他們都生成100％有效的CSS。 CSS可以做的任何事情，SASS和LESS都可以輸出（但通常用較少的冗長度和頭髮拉動）;但是，如果CSS無法做到這一點，那麼SASS或LESS就無法做到這一點。

你也許能夠逃脫使用Javascript：

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

來源

2012-09-04 22:23:39 nzifnab

那麼有一種方法可以讓CSS做到這一點[link]（http://www.w3.org/TR/css3-values/#calc）。聽起來像我運氣不好，直到瀏覽器趕上規格。 – Drastick

Ya我意識到calc（），但是現在你不能依賴它，因爲它具有如此低的瀏覽器滲透率。 – nzifnab

替代CSS Calc（）？ LESS或SASS可以對像素計算執行百分比嗎？

回答

相關問題