CSS SASS数学计算
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19017555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SASS Math Calculation
提问by SeekingCharlie
Trying to create a responsive grid of videos. Instead of using different %'s for each media query, I was hoping to use a standard SASS formula that calculates based on 100% width, however not sure if SASS can do this. The 40 in the below formula, takes into account 2 x 20px fixed margins (i.e this would be a 3-column grid).
尝试创建响应式视频网格。我希望使用基于 100% 宽度计算的标准 SASS 公式，而不是对每个媒体查询使用不同的 %，但不确定 SASS 是否可以做到这一点。下面公式中的 40 考虑了 2 x 20px 固定边距（即这将是一个 3 列网格）。
Ideal formula:
理想公式：
ul.videos {
li {
width: ((100% / 3) - 40);
}
}
Any way that CSS/SASS can handle this? Would prefer not to use JS if possible.
CSS/SASS 有什么办法可以处理这个问题？如果可能，宁愿不使用 JS。
回答by Tim Medora
This is possible in all major browsersusing calc().
这在所有使用calc().
Demo: http://jsfiddle.net/gb5HM/
演示：http: //jsfiddle.net/gb5HM/
li {
display: inline-block;
width: calc(100% / 3 - 40px);
}
Of course, you can still declare this in a SASS file but it's a pure CSS solution. It's not possible in SASS because SASS doesn't know what 100% is at the time the stylesheet is generated, and the pixel value of 100% can fluctuate as the document is resized.
当然，您仍然可以在 SASS 文件中声明它，但它是一个纯 CSS 解决方案。在 SASS 中这是不可能的，因为在生成样式表时 SASS 不知道 100% 是什么，并且 100% 的像素值会随着文档大小的调整而波动。
回答by Gareth Bowen
Unfortunately you can't subtract 40px from 33%. SASS generates a standard CSS file to be interpreted by the browser, and at build time SASS doesn't know the dimensions of the browser.
不幸的是，您不能从 33% 中减去 40px。SASS 生成一个标准的 CSS 文件以供浏览器解释，并且在构建时 SASS 不知道浏览器的尺寸。
However, you should be able to achieve the desired effect by using CSS margins, eg
但是，您应该能够通过使用 CSS 边距来实现所需的效果，例如
ul.videos {
li {
width: (100% / 3);
div {
margin: 0 20px;
}
}
}
回答by dinocarl
Another newer browser solution would be to use the flexbox display type. It seems to have a similar amount of supportas calc() (really just very modern browsers).
另一种较新的浏览器解决方案是使用flexbox 显示类型。它似乎具有与calc()类似的支持量（实际上只是非常现代的浏览器）。
Sass, or more specifically Compass, would be of some use here since it has flexbox mixins.
Sass，或者更具体地说是 Compass，在这里会有一些用处，因为它有flexbox mixins。
