css - SASS 数学计算

Question

尝试创建响应式视频网格。我希望使用基于 100% 宽度计算的标准 SASS 公式，而不是为每个媒体查询使用不同的 %，但不确定 SASS 是否可以做到这一点。下面公式中的 40 考虑了 2 x 20 像素的固定边距（即这将是一个 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;
     }
  }
}

Answer 3

另一个较新的浏览器解决方案是使用flexbox 显示类型。它似乎具有与calc()类似的支持量（实际上只是非常现代的浏览器）。

Sass，或者更具体地说是 Compass，在这里会有一些用处，因为它有flexbox mixins。