SASS數學計算

Question

試圖創建視頻響應網格。我沒有爲每個媒體查詢使用不同的％，而是希望使用基於100％寬度計算的標準SASS公式，但不知道SASS是否可以這樣做。以下公式中的40考慮了2 x 20px固定邊距（即，這將是3列網格）。

理想公式：

ul.videos { 
    li { 
    width: ((100%/3) - 40); 
    } 
} 

任何方式CSS/SASS可以處理這個問題？如果可能的話，不希望使用JS。

Answer 1

不幸的是，你不能從33％中減去40px。 SASS生成一個標準的CSS文件供瀏覽器解釋，在編譯時SASS不知道瀏覽器的尺寸。

然而，你應該使用calc()能夠通過使用CSS利潤率達到預期的效果，例如

ul.videos { 
    li { 
    width: (100%/3); 
    div { 
     margin: 0 20px; 
    } 
    } 
} 

Answer 2

這是可能的all major browsers。

演示：http://jsfiddle.net/gb5HM/

li { 
    display: inline-block; 
    width: calc(100%/3 - 40px); 
} 

當然，你仍然可以宣佈這在SASS文件，但它是一個純CSS的解決方案。在SASS中這是不可能的，因爲SASS在樣式表生成時不知道100％是什麼，並且100％的像素值可能隨着文檔大小調整而波動。

規格：http://www.w3.org/TR/css3-values/#calc

Answer 3

另一種較新的瀏覽器解決方案是使用flexbox display type。它似乎有一個similar amount of support calc（）（真的只是非常現代的瀏覽器）。

Sass，或者更具體地說是指南針，因爲它具有flexbox mixins，所以在這裏會有一些用處。