SASS数学计算

Posted 2021-05-04

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

理想配方：

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

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

答案

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

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

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

另一答案

这在all major browsers使用calc()是可能的。

但是：ぁzxswい

http://jsfiddle.net/gb5HM/

当然，你仍然可以在SASS文件中声明它，但它是一个纯CSS解决方案。在SASS中这是不可能的，因为SASS不知道样式表生成时100％是什么，并且100％的像素值会随着文档大小调整而波动。

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

另一答案

另一个较新的浏览器解决方案是使用http://www.w3.org/TR/css3-values/#calc。它似乎有一个flexbox display type作为calc（）（真的只是非常现代的浏览器）。

Sass，或者更具体地说是指南针，因为它有similar amount of support，所以在这里会有一些用处。