SASS数学计算

Question

尝试创建响应式视频网格.我没有为每个媒体查询使用不同的%,而是希望使用基于100%宽度计算的标准SASS公式,但不确定SASS是否可以执行此操作.下面的公式中的40,考虑了2 x 20px固定边距(即这将是一个3列网格).

理想配方:

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

CSS/SASS可以处理这个问题吗？如果可能的话,宁愿不使用JS.

Answer 1

这在所有主流浏览器中都可以使用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

Answer 2

不幸的是,你不能从33%中减去40px.SASS生成一个标准的CSS文件,由浏览器解释,在构建时SASS不知道浏览器的尺寸.

但是,您应该能够通过使用CSS边距来实现所需的效果,例如

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