SASS数学计算
SASS数学计算
提问于 2013-09-26 00:51:04
试图创建一个响应性的视频网格。我不想对每个媒体查询使用不同的%s，而是希望使用一个基于100%宽度的标准SASS公式，但是不能确定SASS是否能做到这一点。下面的公式中的40考虑到了2×20 of的固定边距(也就是说，这将是一个3列网格)。
理想公式：
ul.videos {
li {
width: ((100% / 3) - 40);
}
}CSS/SASS能处理这件事吗？如果可能的话，最好不要使用JS。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-09-26 01:08:34
不幸的是，你不能从33%减去40便士。SASS生成一个标准的CSS文件，供浏览器解释，而在构建时，SASS不知道浏览器的大小。
然而，您应该能够通过使用CSS边距达到预期的效果，例如
ul.videos {
li {
width: (100% / 3);
div {
margin: 0 20px;
}
}
}Stack Overflow用户
发布于 2013-09-26 02:52:27
这在使用所有主要浏览器的calc()中是可能的。
演示：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
Stack Overflow用户
发布于 2013-09-26 18:32:59
另一个较新的浏览器解决方案是使用柔性盒显示式。它似乎有一个类似数量的支持作为calc() (实际上是非常现代的浏览器)。
Sass，或者更具体地说是Compass，在这里有一些用处，因为它有柔性箱混合器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19017555
复制相关文章
相似问题
腾讯云开发者
